PDA

View Full Version : How to add new data dynamically to a Ext.List



Manolo Quijano
18 Dec 2012, 5:13 AM
Hi all,
I want to launch a Panel with a List component went I pushed a button.
The list must to show the data of internal component. I tried several ways without success.


handler: function(){ if(window.map){
if(!popup){
popup = Ext.create('Ext.Panel',{
modal: true,
centered: true,
hideOnMaskTap: true,
width: 240,

scrollable: 'vertical',
items: [{
Ext.create('Ext.List',{
itemTpl: '{name}',

listeners: {
initialize: function(){
var me=this;

if(window.map){
var myStore = Ext.create('Ext.data.Store',{
storeId: 'Layer',
fields: ['id','name','visibility','zindex']
});


me.store = myStore;


Ext.each(map.layers,function(layer){
if (layer.displayInLayerSwitcher === true) {
var visibility = layer.isBaseLayer ? (map.baseLayer == layer) : layer.getVisibility();
myStore.add({
id: layer.id,
name: layer.name,
visibility: visibility,
zindex: layer.getZIndex()
});
}
});

}


}
}
};
}]


});
Ext.Viewport.add(popup);
}
popup.show('pop');
}
}

myStore takes the right values but the Panel is always empty.
Some link with an example ?
All the example that I have found is using json o something similar.

Thanks in advances

Manolo Quijano
18 Dec 2012, 2:09 PM
Well I found the error.
I don't know why but when I set the list as an item into de Panel, the List is not shown.

As Ext.List is a container, it is not necessary to use the Panel and the final code is:



Ext.Viewport.add({
xtype:'list',
modal: true,
hideOnMaskTap: true,
centered: true,
width: 240,
height: 200,
scrollable: 'vertical',
border: 3,
style: 'border-color: blue; border-style: solid;',
store:{
fields: ['id', 'name','visibility','zindex'],
sorters: 'zindex'
},
itemTpl: '{name}',

listeners: {
initialize: function(){
if(window.map){
var me=this;
Ext.each(map.layers,function(layer){
if(layer.displayInLayerSwitcher === true){
var visibility = layer.isBaseLayer ? (map.baseLayer == layer): layer.getVisibility();
me.get('store').add({
id: layer.id,
name: layer.name,
visibility: visibility,
zindex: layer.getZIndex()
});
}
});
}
}
}
});