PDA

View Full Version : Update items of extjs Panel.



dev_ill
2 Dec 2014, 10:40 PM
Hi all,

I have three Extjs panels(panel_1, panel_2, panel_3) and i used viewport to view in my app. I need to do when i click on button or graph in panel_2 then cintent of panel_3 should update automatically like items of panel, title of panel etc.

My sample code looks like...



var panelHeader = '';
var dataItems = '';
var panel_1 = new Ext.TabPanel({
id : 'panel_1',
region : 'center',
activeTab : 0,
items : [ panelItems ]

});

var panel_2 = new Ext.Panel({
id : 'panel_2',
layout : 'fit',
split : true,
height : 100,
region : 'south'
});
var panel_3 = new Ext.Panel({
title: panelHeader,
id : 'panel_3',
collapsible : true,
width : 280,
layout: {
type : 'form',
},
region : 'east',
autoScroll : true,
items: [ dataItems ]
});


When i click on panel_2, title and dataItems should get updated.
My viewport looks like..

var viewport = new Ext.Viewport({
layout : 'border',
items : [ {
xtype : 'panel',
margins : '5 5 5 5',
region : 'center',
layout : 'border',
border : false,
items : [ new Ext.Panel({
region : 'west',
layout : 'border',
split : true,
width : 180,
border : false,
items : [ panel_1]
}), panel_2, panel_3 ]
}]
});

Basically content of items field is form, so i want to reflect defferent forms according to click.
my listener looks like...

graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
{
var e = evt.getProperty('event'); // mouse event
var cell = evt.getProperty('cell'); // cell may be null

//if (cell != null && !e.isConsumed())
{
if(graph.getSelectionCell() != null && graph.getSelectionCount() == 1)
{
var selectedCell = graph.getSelectionCell();
if(selectedCell.value.nodeName === 'step_1')
{
panelHeader = 'step_1';
dataItems = {
xtype: 'fieldset',
items: [
{
xtype: 'radiogroup',
fieldLabel: 'Select a method for step_1',
labelStyle: 'font-weight:bold;',
columns: 1,
vertical: true,

items: [{
boxLabel: 'button_1',
name: 'rb',
inputValue: '1'
}, {
boxLabel: 'button_2',
name: 'rb',
inputValue: '2',
checked: true
}]

},
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Your name',
labelStyle: 'font-weight:bold;'
},
{
xtype: 'button',
buttonAlign: 'center',
text: 'Save',
handler: function() {

}
}
]
};
}
else if(selectedCell.value.nodeName === 'step_2')
{
panelHeader = 'step_2';
dataItems = {
xtype: 'fieldset',
items: [
{
xtype: 'radiogroup',
fieldLabel: 'Select method for step_2,
labelStyle: 'font-weight:bold;',
columns: 1,
vertical: true,

items: [{
boxLabel: 'method_1',
name: 'rb',
inputValue: '1'
}, {
boxLabel: 'method_2',
name: 'rb',
inputValue: '2',
checked: true
}]

},
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Specify e-value',
labelStyle: 'font-weight:bold;'
},
{
xtype: 'button',
buttonAlign: 'center',
text: 'Save',
handler: function() {

}
}
]
};
}
}
var updpanl = pane_3l.items.first();
panel_3.items.remove(updpanl);
pane_3l.items.add(dataItems);
panel_3.items.doLayout();
/*propertyPanel.items.update(dataItems);
propertyPanel.doLayout();*/
evt.consume();
}
});

I checked in debuger, variable panelHeader and dataItems is updated on click but it is not getting reflected in panel.
Please help...


Thaks in advance

willigogs
3 Dec 2014, 12:13 AM
Ext.getCmp('panel_1').setTitle('Your new title here')

http://docs.sencha.com/extjs/3.4.0/?mobile=/api/Ext.Panel#method-setTitle

dev_ill
3 Dec 2014, 12:44 AM
Hi willigogs,
Thanks for reply.

Yeah its working fine for title, same feature i want for items field also.




var panel_3 = new Ext.Panel({
title: panelHeader,
id : 'panel_3',
.
.
items: [ dataItems ] });


Is there any way to do it.

Thaks a lot again..

willigogs
3 Dec 2014, 12:52 AM
Look at the API documentation for the "add" function on a panel.You might have to call removeAll or similar first to clear out the old item objects.

dev_ill
3 Dec 2014, 1:01 AM
Hi willigogs,

Please see my code for listener...


var updpanl = panel_3.items.first();
panel_3.items.remove(updpanl);
panel_3.items.add(dataItems);
panel_3.items.doLayout();

It is not working, or may be it is not supported in 3.4 version.
Any other way to do it.

Thanks

dev_ill
3 Dec 2014, 10:36 PM
I got the solution. I have to use 'removeAll', 'add' and 'doLayout'.


panel_3.removeAll();
panel_3.add(dataItems);
panel_3.doLayout();
Thanks.