I have a extend FormPanel:
Ext.ns('myapp');
myapp.StandartForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,xtype: 'test'
,frame:true
,initComponent: function(){
var self = this;
this.editWindow = new Ext.Window({
id: 'editWSWin',
layout: 'fit',
title:this.editPanelTitle,
autoScroll:false,
width:300,
html:'hi'
});
var config = {
items: [{
layout:'column',
items:[this.grid],
buttons: [{
text: 'Edit',
id: "editBtn",
handler: this.editFormCreate,
scope: this,
hidden: this.editbuttonHidden,
disabled:true
}]
}]};
// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
myapp.StandartForm.superclass.initComponent.call(this);
}
, editFormCreate : function (){
this.editWindow.show();
}
});
Ext.reg(myapp.StandartForm.prototype.xtype, myapp.StandartForm);
In this panel i press button Edit and window showing. After i close window and press Edit button again but get error:
TypeError: b.dom is undefined
I think it's mean that my window undifined.
How can i extend FormPanel to be able use window correctly?
UPDATE
function to create window:
function test(){
var editWindow = new Ext.Window({
id: 'editWSWin',
layout: 'fit',
title:this.editPanelTitle,
autoScroll:false,
width:300,
html:'hi'
});
return editWindow
}
and call it:
, editFormCreate : function (){
test.show();
}
But its undifined.
When you close the window, it gets destroyed, so you can't show it again. You need to either:
Set the closeAction property on the window
Create the window inside editFormCreate each time
When you close a Ext.Window, you dispose of the DOM elements it creates so there is nothing to show anymore. You need to instantiate a new one before showing it in this case.
Related
So i have this function onDisplayError which is called each time if request fails. This means if user press save button and 3 request are failing i currently getting 3 popup messages. My goal is that this function checks if my popup window is already opened. If it is then i will append errors in my already opened window otherwise it should open this error popup
onDisplayError: function (response, message) {
var errorPanel = Ext.create('myApp.view.popup.error.Panel',{
shortMessage: message,
trace: response
});
if(errorPanel.rendered == true){
console.log('Do some other stuff');
}else{
errorPanel.show();
}
},
This is Panel.js
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
requires: [
'myApp.view.popup.error.PanelController'
],
controller: 'myApp_view_popup_error_PanelController',
title: 'Fail',
glyph: 'xf071#FontAwesome',
floating: true,
draggable: true,
modal: true,
closable: true,
buttonAlign: 'center',
layout: 'border',
shortMessage: false,
width: 800,
height: 200,
initComponent: function() {
this.items = [
this.getMessagePanel(),
this.getDetailsPanel()
];
this.callParent(arguments);
},
getMessagePanel: function() {
if(!this.messagePanel) {
var message = this.shortMessage;
this.messagePanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
height: 200,
region: 'center',
border: false,
html: message
});
}
return this.messagePanel;
},
getDetailsPanel: function() {
if(!this.detailsPanel) {
this.detailsPanel = Ext.create('Ext.panel.Panel', {
title: 'Details',
hidden: true,
region: 'south',
scrollable: true,
bodyPadding: 5,
height: 400,
html: '<pre>' + JSON.stringify(this.trace, null, 4) + '</pre>'
});
}
return this.detailsPanel;
}
The problem is that i'm still getting multiple popups displayed. I think that the problem is that var errorPanel loses reference so it can't check if this popup (panel) is already opened. How to achieve desired effect? I'm working with extjs 6. If you need any additional information's please let me know and i will provide.
You could provide to your component definition a special xtype.
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
xtype:'myxtype'
and then you could have a very condensed onDisplayError function:
onDisplayError: function (response, message) {
var errorPanel = Ext.ComponentQuery.query('myxtype')[0] || Ext.widget('myxtype');
errorPanel.appendError(message, response)
errorPanel.show();
},
The panel's initComponent function should initialize an empty window, and appendError should contain your logic to append an error (which may be the first error as well as the second or the third) to the list of errors in the panel.
Using Ext.create will always create a new instance of that class.
You can use the reference config to create a unique reference to the panel.
Then, use this.lookupReference('referenceName') in the controller to check if the panel already exists, and show().
You also have to set closeAction: 'hide' in the panel, to avoid panel destruction on close.
Otherwise, you can save a reference to the panel in the controller
this.errorPanel = Ext.create('myApp.view.popup.error.Panel' ....
Then, if (this.errorPanel) this.errorPanel.show();
else this.errorPanel = Ext.create...
I'm having a problem with treepanel in extjs5. when I create a tree panel like this:
Ext.syncRequire(['Ext.tree.Panel',
'Ext.form.Label',
'Ext.window.*',
'Ext.data.TreeStore'
]);
var myTreePanel = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
});
then in the same file I have:
//Window view:
var treeViewWindow = Ext.create('Ext.window.Window', {
items:[myTreePanel]
});
Ext.application({
name: 'Training App',
launch: function () {
treeViewWindow.show();
}
});
This doesn't work, and give me the error:
Uncaught TypeError: Cannot read property 'create' of undefined in Component.js:5421
note that if I changed the treepanel with panel, it works.
and if I put the whole code inside the lunch function (the window and treepanel variables) then it works too!
can anyone help me out here?
You just forgot to define store.
store: store
You code in fiddle
I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work http://www.senchafiddle.com/#8zaXf
var view = Ext.Viewport.add({
xtype: 'navigationview',
onBackButtonTap: function () {
alert('Back Button Pressed');
},
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
//when someone taps this button, it will push another view into stack
view.push({
//this one also has a title
title: 'Second View',
padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//and when you press this button, it will pop the current view (this) out of the stack
view.pop();
}
}
]
});
The fiddle you've mentioned works well in my local project on my machine. For some reason, it doesn't work on fiddle site. Try running it on your local project.
Still instead of using onBackButtonTap config, it's good to extend Ext.navigation.View class and override onBackButtonTap method. That way you'll have more control over whole components. You'd also like to override other configs as well. Here's what I'd use -
Ext.namespace('Ext.ux.so');
Ext.define('Ext.ux.so.CustomNav',{
extend:'Ext.navigation.View',
xtype:'customnav',
config:{
},
onBackButtonTap:function(){
this.callParent(arguments);
alert('back button pressed');
}
});
the line this.callParent(arguments) will allow component to behave in default way + the way to wanted it to behave. And if you want to completely override the back button behavior you can remove this line. Try doing both ways.
To use this custom component, you can use -
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var view = Ext.create('Ext.ux.so.CustomNav', {
fullscreen: true,
items: [{
title: 'First',
items: [{
xtype: 'button',
text: 'Push a new view!',
handler: function() {
//use the push() method to push another view. It works much like
//add() or setActiveItem(). it accepts a view instance, or you can give it
//a view config.
view.push({
title: 'Second',
html: 'Second view!'
});
}
}]
}]
});
}
Give this a shot. It'll work for you yoo.
forum member I am having one problem while using the loadMask property of the extjs 4.0.2a. Actually I am having one grid which on click open the window with detail information.
As my detail window takes more time to come on screen, so I just decided to make use of the loadMask property of Extjs. But don't know why the loading message is not shown when I double click the grid row and after some time the detail window is shown on the screen.
on grid double click I am executing the below code
projectEditTask: function(grid,cell,row,col,e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading.."});
myMask.show();
var win = this.getProjectGanttwindow();
win.on('show', myMask.hide, myMask);
}
but don't know the loading is not displayed and after waiting for some moment my window is shown correctly.
I just want when I double click the grid Loading message should be displayed and after when the window is load completely Loading message should be dissapear and detail window should be viewed.
when I made the changes as per you said the loading message is displayed but my window is not opened yet. below is the code of window I am trying to open
my projectGanttwindow is
Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window
listeners: {
hide: function() {
alert('hide');
//var store = Ext.data.StoreManager.lookup('taskStore').destroyStore();
//Ext.destroy(store);
//store.destroyStore();
console.log('Done destroying');
}
},
initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];
me.callParent(arguments);
me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});
}
}
});
Try this
function loadMask(el,flag,msg){
var Mask = new Ext.LoadMask(Ext.get(el), {msg:msg});
if(flag)
Mask.show();
else
Mask.hide();
}
When u click on grid call this function
//Enable mask message
loadMask(Ext.getBody(),'1','Please wait...');
After pop loaded call
//Disable mask Message
loadMask(Ext.getBody(),'','Please wait...');
I have been able to put tools into window title bars before, but would like to be able to do the same thing to a Panel.
This was my attempt:
panel = new Ext.Panel({
id: 'my_panel',
region: 'west',
title:'MyTitle',
iconCls:'helpIcon',
initComponent:function(){
var config = {
tools:[{
id: 'gear',
handler: function(){...}
}]
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
Ext.Panel.superclass.initComponent.apply(this, arguments);
}
}
Some advice would be greatly appreciated
JJ
The previous posts are correct, but I thought I would explain why what you are doing is wrong.
You are completely redefining the initComponent method of Ext.Panel in the object you are creating, and the default Ext.Panel.initComponent needs to run in order to setup things like tools.
In your code, when you call Ext.Panel.superclass.initComponent, you are calling Ext.BoxComponent.initComponent, not the existing Ext.Panel.initComponent.
In order to do special initComponent things, and then call up to Ext.Panel.initComponent, you need to create an extension of Ext.Panel:
MyPanelClass = Ext.extend(Ext.Panel, {
id: 'my_panel',
region: 'west',
title:'MyTitle',
iconCls:'helpIcon',
initComponent:function(){
var config = {
tools:[{
id: 'gear',
handler: function(){...}
}]
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
MyPanelClass.superclass.initComponent.apply(this, arguments);
}
});
And then later:
var mypanel = new MyPanelClass();
You seems to have mixed up with many things in your code. You seems to be trying to extend the panel and use region property. The region property is used for border layout.
here is how:
panel = new Ext.Panel({
id: 'my_panel',
title:'MyTitle',
iconCls:'helpIcon',
tools:[{
id: 'gear',
handler: function(){...}
}]
});
If you need to extend you will have to use the Ext.extend() method.
You are almost there.
panel = new Ext.Panel({
id: 'my_panel',
region: 'west',
title:'MyTitle',
iconCls:'helpIcon',
tools:[{
id: 'gear',
handler: function(){...}
}]
};