PDA

View Full Version : How to return the selected item on a dinamically builded treepanel ??



luisparada
27 May 2012, 9:53 PM
I have an issue trying to get the selected item of my treepanel, which is filled from a treestore by ajax. When I try treepanel = Ext.getCmp('tree').getSelectionModel().getSelection() it returns [] also with getSelected() returns [] and is basically the same with all methods I use to get the selected child., the node childs are inside the root node which is hidden, here is my treepanel code:


Ext.define('AvlSystem.view.menu.VehiculosAsignados' ,{
extend: 'Ext.tree.Panel',
alias : 'widget.assignedvehiclesmenu',

border:false,
rootVisible:false,
autoScrol:true,

initComponent: function() {
this.id = 'assigned-vehicles-panel';

this.title = 'Vehiculos Asignados';

this.store = 'AssignedVehicles';

this.useArrows = true;

this.frame = true;

this.selModel = {
mode:'SINGLE'
}

var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"action":"ONLINE", "name":"Conectado"},
{"action":"OFFLINE", "name":"No Disponible"},
{"action":"DISCONNECTED", "name":"Desconectado"},
{"action":"NEVERCONN", "name":"Nunca Conectado"}
]
});

var combo = Ext.create('Ext.form.field.ComboBox', {
editable:false,
hideLabel: true,
store: states,
displayField: 'name',
valueField:'action',
typeAhead: false,
queryMode: 'local',
triggerAction: 'all',
emptyText: 'Mostrar',
selectOnFocus: true,
width: 90,
iconCls: 'no-icon'
});

var orderButton = Ext.menu.Menu({
autoWidth:true,
autoHeight:true,
floating: false,
autoRender:true,
items:[{
id:'add-geocerca-id',
text:'Crear Geocerca'
},{
id:'delete-geocerca-id',
text:'Eliminar Geocerca'
}]
});

this.dockedItems = [{
id:'main-commands-toolbar',
xtype:'toolbar',
items:['->',combo,{
text:'Geocercas',
iconCls:'geofence',
menu:[{
id:'add-geocerca-id',
text:'Crear Geocerca'
},{
id:'delete-geocerca-id',
text:'Eliminar Geocerca'
}]
}]
}];

this.listeners = {
itemclick:function(el,ind){
var mainpanel = Ext.getCmp('main-center-panel').setActiveTab(0);
var gmap = Ext.getCmp('gmap-base');
var mapa = Ext.getCmp('gmap-base').getMap();
var darwin = new google.maps.LatLng(ind.data.googlelat,ind.data.googlelong);
mapa.setZoom(16);
mapa.setCenter(darwin);
gmap.lastCenter = darwin;
},
select:function(el,ind){
if(Ext.getCmp('commands-options-menu')){
Ext.getCmp('main-commands-topmenu').enable();
store = Ext.getStore('commands-menu-store');
store.removeAll(true);
store.load({
params:{
imei:ind.data.imei
}
});
}
}
};

this.callParent(arguments);
}
});


and here is my controller:


Ext.define('AvlSystem.controller.Commands', {
extend: 'Ext.app.Controller',
views:['menu.Comandos','menu.VehiculosAsignados'],
refs:[{
ref:'tree',
selector:'assignedvehiclesmenu'
}],
init: function() {
this.control({
'commandsmenu':{
click:this.sendCommand
}
})
},
sendCommand:function(view, record, item, index){
form = Ext.create('Ext.form.Panel',{
url: '/index.php/AvlComandosQueue/sendCommand',
frame:true,
border:false,
autoWidth:true,
autoHeight:true,
items:[{
id:'password',
xtype:'textfield',
inputType:'password',
fieldLabel:'Password',
allowBlank:false
}],
buttons: [{
id:'form-submit-id',
text: 'Submit',
listeners:{
click:function(el){
treepanel = Ext.getCmp('assigned-vehicles-panel').getSelectionModel().selected.items;
console.log(treepanel);
var form = this.up('form').getForm();
if (form.isValid()) {
var pass = (this.up('form').down('#password'));
var crypted = (hex_md5(pass.getValue()));
pass.setValue(crypted);
form.submit({
success: function(form, action) {
console.log('listo')
},
failure: function(form, action) {
pass.reset();
Ext.Msg.alert('Error', action.result.Msg);
}
});
}
}
}
}]
})

win = Ext.create('Ext.window.Window',{
height:100,
width:300,
closable:true,
title: 'Credenciales',
items:[form]
});

win.show();
}
});


Can anyone help me on this ???

scottmartin
31 May 2012, 2:32 PM
This works for me:




var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});

var tree = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
var sm = tree.getSelectionModel();
var sel = sm.getSelection();

console.log(sm);
console.log(sel);
console.log(sel[0].data.text); // displays 'book report' if selected
}
});


Regards,
Scott.