PDA

View Full Version : Conatiner is not calling all listeners of contained item



tayyabah
20 Oct 2010, 4:45 AM
if container is having any instance of pre-configured class then this contained object's listeners are not called.

I have an extended class of panel which is implementing the row layout. And in the row item I have a pre-configured class of one of my grids defined as xtype. This grid's show event is not fired when this panel is showed.

Can anybody faced the same problem?

Condor
20 Oct 2010, 4:54 AM
Your description is too cryptic.

Could you explain more and post some code?

tayyabah
20 Oct 2010, 5:07 AM
I have an extended grid and following is the code:


Application.SettingGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
Ext.apply(this, {
flex:2,
layout: 'fit',
border: false,
loadMask : {msg: 'Loading Data...'},
viewConfig:
{
forceFit:true
},
store: new Ext.data.DirectStore( {
// .... store config
}),
cm: new xg.ColumnModel([
new Ext.grid.RowNumberer(),
// column config
]),
sm: new Ext.grid.RowSelectionModel({
// row selection
}),
listeners: {
render: function(){
alert("setting grid render");
},
show: function(){
alert("setting grid show");
this.getStore().load();
}
}

});
Application.SettingGrid.superclass.initComponent.call(this);
}
});
Ext.reg('settinggrid', Application.SettingGrid);

setting grid's show method is not called when it is contained in the following container.
Here is the code: I have a setting card (extended class) which is using the settinggrid.


Application.card.Setting = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this, {
title: 'Application Settings',
layout: 'ux.row',
monitorValid:true,
layoutConfig: {
align : 'stretch',
anchor: '100%'
},
items: [{
rowHeight: 1,
border: false,
layout: 'hbox',
layoutConfig: {
align : 'stretch'
},
items: [{xtype: 'settinggrid',title: 'my setting grid'}]
}
],
listeners: {
render: function(){
},
show: function(){
}
}
});
Application.card.Setting.superclass.initComponent.call(this);
}
});
Ext.reg('settingcard', Application.card.Setting);

I want the show event of grid to be fired. Can you please tell me what is the problem with my code?

tayyabah
20 Oct 2010, 5:08 AM
I have an extended grid and following is the code:


Application.SettingGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
Ext.apply(this, {
flex:2,
layout: 'fit',
border: false,
loadMask : {msg: 'Loading Data...'},
viewConfig:
{
forceFit:true
},
store: new Ext.data.DirectStore( {
// .... store config
}),
cm: new xg.ColumnModel([
new Ext.grid.RowNumberer(),
// column config
]),
sm: new Ext.grid.RowSelectionModel({
// row selection
}),
listeners: {
render: function(){
alert("setting grid render");
},
show: function(){
alert("setting grid show");
this.getStore().load();
}
}

});
Application.SettingGrid.superclass.initComponent.call(this);
}
});
Ext.reg('settinggrid', Application.SettingGrid);

setting grid's show method is not called when it is contained in the following container.
Here is the code: I have a setting card (extended class) which is using the settinggrid.


Application.card.Setting = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this, {
title: 'Application Settings',
layout: 'ux.row',
monitorValid:true,
layoutConfig: {
align : 'stretch',
anchor: '100%'
},
items: [{
rowHeight: 1,
border: false,
layout: 'hbox',
layoutConfig: {
align : 'stretch'
},
items: [{xtype: 'settinggrid',title: 'my setting grid'}]
}
],
listeners: {
render: function(){
},
show: function(){
}
}
});
Application.card.Setting.superclass.initComponent.call(this);
}
});
Ext.reg('settingcard', Application.card.Setting);

I want the show event of grid to be fired. Can you please tell me what is the problem with my code?

tayyabah
20 Oct 2010, 5:16 AM
I have an extended grid and following is the code:


Application.SettingGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
Ext.apply(this, {
flex:2,
layout: 'fit',
border: false,
loadMask : {msg: 'Loading Data...'},
viewConfig:
{
forceFit:true
},
store: new Ext.data.DirectStore( {
// .... store config
}),
cm: new xg.ColumnModel([
new Ext.grid.RowNumberer(),
// column config
]),
sm: new Ext.grid.RowSelectionModel({
// row selection
}),
listeners: {
render: function(){
alert("setting grid render");
},
show: function(){
alert("setting grid show");
this.getStore().load();
}
}

});
Application.SettingGrid.superclass.initComponent.call(this);
}
});
Ext.reg('settinggrid', Application.SettingGrid);

tayyabah
20 Oct 2010, 5:44 AM
why I am not been able to reply to this thread :(

tayyabah
20 Oct 2010, 5:44 AM
I have an extended grid and following is the code:


Application.SettingGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent: function() {
Ext.apply(this, {
flex:2,
layout: 'fit',
border: false,
loadMask : {msg: 'Loading Data...'},
viewConfig:
{
forceFit:true
},
store: new Ext.data.DirectStore( {
// .... store config
}),
cm: new xg.ColumnModel([
new Ext.grid.RowNumberer(),
// column config
]),
sm: new Ext.grid.RowSelectionModel({
// row selection
}),
listeners: {
render: function(){
alert("setting grid render");
},
show: function(){
alert("setting grid show");
this.getStore().load();
}
}

});
Application.SettingGrid.superclass.initComponent.call(this);
}
});
Ext.reg('settinggrid', Application.SettingGrid);

setting grid's show method is not called when it is contained in the following container. Here is the code: I have a setting card (extended class) which is using the settinggrid.


Application.card.Setting = Ext.extend(Ext.Panel, {
initComponent: function() {
Ext.apply(this, {
title: 'Application Settings',
layout: 'ux.row',
monitorValid:true,
layoutConfig: {
align : 'stretch',
anchor: '100%'
},
items: [{
rowHeight: 1,
border: false,
layout: 'hbox',
layoutConfig: {
align : 'stretch'
},
items: [{xtype: 'settinggrid',title: 'my setting grid'}]
}
],
listeners: {
render: function(){
},
show: function(){
}
}
});
Application.card.Setting.superclass.initComponent.call(this);
}
});
Ext.reg('settingcard', Application.card.Setting);

I want the show event of grid to be fired. Can you please tell me what is the problem with my code?

Condor
20 Oct 2010, 5:54 AM
1. In Ext 3 you should be using vbox layout instead of ux.row.
2. The show event is only fired for Ext.Window. Other components don't have a 'show' event.
3. Why are you using an extra panel with hbox layout inside the ux.row layout to hold the grid? You don't need that panel if it only contains one item.
4. How is this settingcard class used? As an item in a card layout? In that case it will have an 'activate' event that you could use to load the grid.

tayyabah
20 Oct 2010, 6:22 AM
1. Yes I am using Ext 3. Will use vbox now.
2. I am able to see the show event in the API for panel and this is fired when that panel is shown. That is why I used it for other panels.
3. I am using hbox because I will be going to have a grid and form.
4. setting card is used in the card layout. I want to encapsulate the component related functionality in the respective component. I want to avoid the loading thing in activate method of card to avoid coupling. I want the grid to load itself. So that if I want to use it in another card/window etc then I will just need to add it as an item.

Condor
20 Oct 2010, 6:24 AM
In that case you're stuck with using the 'render' event (which might fire before the grid is actually visible).