PDA

View Full Version : ExtJS 4.0.7 to 4.1 Migration : Adding Components Dynamically Failed.



j0shy
12 Jul 2012, 7:26 AM
I have a requirement where a user must be able to split a given panel into two parts (horizontally/vertically) dynamically.
I achieved the same in ExtJS 4.0.7 using this code




splitPanel: function(direction)
{
var subWizard1 = Ext.create('Ext.ux.SplitPanel', {
contextMenuItems: this.contextMenuItems
});

var subWizard2 = Ext.create('Ext.ux.SplitPanel', {
contextMenuItems: this.contextMenuItems
});


this.layout = {
type: direction,
align: 'stretch'
};

this.add([ subWizard1, subWizard2]);


subWizard1.on({
userSelection:
{
scope: this,
fn : function(sourceEvent,sourceObject,options)
{
this.fireEvent('userSelection',sourceEvent,sourceObject,options);
}
}
});
subWizard2.on({
userSelection:
{
scope: this,
fn : function(sourceEvent,sourceObject,options)
{
this.fireEvent('userSelection',sourceEvent,sourceObject,options);
}
}
});
}



The definition of Ext.ux.Split Wizard : -



Ext.define('Ext.ux.SplitPanel', {
extend : 'Ext.panel.Panel',


mixins: {
splitPanelController: 'Ext.ux.SplitPanel.Controller'
},

initComponent : function() {
var config = {
flex: 1,
autoDestroy: true,
autoRender: true,
listeners:
{
render: function()
{
//Adding a Context Menu Click Event Listener. Since this is a simple plain panel without any items (unlike grid,tree etc)
// we need to add the contextmenu listener on the body DOM . Ext.getBody() returns the current document body as an Ext.element
this.body.on({
contextmenu:
{
scope: this,
// disable the browser's default context menu
stopEvent: true,
fn:function(sourceEvent, sourceObject, options)
{
this.genContextMenu(sourceEvent, sourceObject , options);
}
}
});
}
}
};


this.elemRepID = "";

Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.SplitPanel.superclass.initComponent.apply(this, arguments);

this.addEvents('userSelection');
},
onRender: function()
{
Ext.ux.SplitPanel.superclass.onRender.apply(this, arguments);
}


});




'Ext.ux.SplitWizard.Controller' which is mixed in 'Ext.ux.SplitWizard' has the "splitPanel" Method which is called from a context menu on the panel.
This way user can right click on the panel where a contextmenu pops up using which he can split the panel horizontally/vertically which calls the
'splitPanel' method accordingly.


The genContextMenu method :



genContextMenu : function(sourceEvent, sourceObject , options) {

var menuItems = new Array();

menuItems.push({
text : 'Split',
iconCls : 'ContextMenu-Split-icon',
menu : {
items : [ {
text : 'Horizontally',
scope : this,
iconCls : 'ContextMenu-Split-Vertical-icon',
handler : this.splitPanel.bind(this,'vbox')
}, {
text : 'Vertically',
scope : this,
iconCls : 'ContextMenu-Split-Horizontal-icon',
handler : this.splitPanel.bind(this,'hbox')
}, {
text : 'UndoSplit',
scope: this,
iconCls : 'ContextMenu-Undo',
handler : this.undoSplit
} ]
}
});

var wizardContextMenu = Ext.create('Ext.menu.Menu', {
margin : '0 0 10 0',
floating : true,
renderTo : Ext.getBody(),
items : menuItems,
listeners:
{
render: function()
{
// Disabling browser context menu from popping when right clicked on menu body.
this.body.on({
contextmenu:
{
scope: this,
stopEvent: true,
fn: Ext.emptyFn
}
});
}
}
});

wizardContextMenu.showAt(sourceEvent.getXY());
}



This was working fine in 4.0.7. But when I migrated to 4.1 the


this.add([ subWizard1, subWizard2]);

failed with "container is undefined" . Is this the right way to do it ?? or is there any better way?

scottmartin
12 Jul 2012, 1:25 PM
There is not much to review ... the code must be in Ext.ux.SplitPanel.Controller?

Several things ..
-Have you tried to contact the author about this?
-Have you set a breakpoint in the code to see if everything is initialized at the point of error?

Scott.

j0shy
12 Jul 2012, 10:45 PM
1) The Code is in the Ext.ux.SplitWizard.Controller. I am the one who wrote this code .. I have just pasted two of the methods in the controller. There are several other methods in the Controller which I think are irrelevant and didnt post it.
2) Yes, I did try debugging it. I think the part where I am changing the layout of the panel dynamically



this.layout = {
type : direction,
align : 'stretch'
}


is causing the problem. As i had already mentioned this was working fine in 4.0.7. I am adding components dynamically in several other places in my application with the "add" method and it is working fine.
So, I think the question must be is there a way to change the layout of the panel dynamically after the component has been initialized??