PDA

View Full Version : Add items to Accordion layout from controller after Store is loaded.



luisparada
21 Mar 2012, 12:45 AM
I have a huge problem, I'm trying to add items to a west accordion panel from my controller, using store.each, I have tried adding methods like panel.add(childs) where childs is a valid array with title and html attributes, passed as an object. after I have all records added to the array I try using panel.doLayout() and it does't work at all, so I'm confused on this part because no matter what I do, it doesn't work.
here is my controller code:


Ext.define('AvlSystem.controller.Map', {
extend: 'Ext.app.Controller',
models:['TrackingLogs'],
stores:['TrackingLogs'],
views:['map.Gmap','menu.VehiculosAsignados'],
refs:[{
ref:'assignedVehicles',
selector:'assignedvehiclesmenu'
}],
init: function() {
store = Ext.getStore('TrackingLogs');
store.load();
var task = new Ext.util.DelayedTask(function(){
this.addMarkers(store);
this.addVehiclesList(store);
},this);
task.delay(5000);
},
addMarkers:function(store){
var mapa = Ext.getCmp('gmap-base');
mapa.clearMarkers();
var markers = new Array();
store.each(function(rec){
var tipovehiculo = rec.data.id_tipo_vehiculo;
var icon = rec.data.icon;
var labelText = rec.data.descripcion;
var senal = (rec.data.reported_command == "F") ? '<span class="senalon">GPS Conectado</span>' : '<span class="senaloff">GPS Desconectado</span>';
var foto = (rec.data.foto == "") ? 'logo.png' : rec.data.foto;
var telefono_celular = (rec.data.telefono_celular == "") ? 'No Disponible' : rec.data.telefono_celular;
var telefono_habitacion = (rec.data.telefono_habitacion == "") ? 'No Disponible' : rec.data.telefono_habitacion;
var velocidad = (rec.data.velocidad<2) ? 'Detenido' : rec.data.velocidad;
var boxText = document.createElement("div");
boxText.style.cssText = '-moz-border-radius:7px;'+
'-webkit-border-radius:7px;'+
'border: 1px solid #696969;'+
'background:#DCDCDC;'+
'padding: 8px;'+
'height:188px;'+
'width:500px;';

boxText.innerHTML = '<div id="infowindow">'+
'<div style="float:right;"><img src="/images/vehiculos/mini/superp-'+foto+'" /></div>'+
'<div style="float:left;">'+
'<b><span style="font-size:14px; text-align:center">Alias:'+rec.data.descripcion+'</span></b>'+
'<ul>'+
'<li>Placa: <b>'+rec.data.placa+'</b></li>'+
'<li>Modelo: <b>'+rec.data.modelo+'</b></li>'+
'<li>Color: <b>'+rec.data.color+'</b></li>'+
'<li>Aņo: <b>'+rec.data.ano+'</b></li>'+
'<li>Nombres y Apellidos: <b>'+rec.data.nombres+" "+rec.data.apellidos+'</b></li>'+
'<li>Telefono Celular / Habitacion: <b>'+rec.data.telefono_celular+' - '+rec.data.telefono_habitacion+'</b></li>'+
'<li>Velocidad: <b>'+velocidad+'</b></li>'+
'<li>Ultimo Reporte: <b>'+rec.data.ultima_comunicacion+'</b></li>'+
'<li>Seņal: <b>'+senal+'</b></li>'+
'<li>Coordenadas: <b>Lat: '+rec.data.googlelat +' Long: '+rec.data.googlelong+'</b></li>'+
'<ul>'+
'</div>'+
'</div>';
markers.push({
id:rec.data.imei,
lat:rec.data.googlelat,
lng:rec.data.googlelong*-1,
marker:{title:rec.data.descripcion,
infoWindow:{
content:boxText
},
icon:icon
}
});
});

var cluster = mapa.addMarkers(markers);

},
addVehiclesList:function(store){
var west = Ext.getCmp('main-west-panel');
var vehiclesMenu = Ext.getCmp('assigned-vehicles-panel');
var childs = [];
store.each(function(rec){
childPanel = new Ext.Panel({
title:'holaaaaaaaaaaaaaaa',
html:'test',
collapsed:true
});
vehiclesMenu.add(childPanel);
});

vehiclesMenu.doLayout();
west.expand();
},
processAlarm:function(rec){
var cache = new Array();
var obj = [{
id:rec.data.imei,
descripcion:rec.data.descripcion,
alarma:rec.data.tipo_data,
cantidad_alertas:""
}];
}
});


And here is the accordion view:


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

layout:'accordion',
autoScrol:true,
autoShow:true,

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

this.title = 'Vehiculos Asignados';

this.layoutConfig = {
animCollapse: false,
collapsible: true,
autoWidth: true,
titleCollapse: true,
collapseFirst: false,
collapsed: true
}

this.items = [];

/*this.listeners = {
itemclick:function(el,ind){
var mainpanel = Ext.getCmp('main-center-panel').setActiveTab(0);
Ext.Ajax.request({
url:'/index.php/AvlVehiculos/getlastvehicleposition/',
params:{
imei:ind.data.imei
},
success:function(response){
var obj = Ext.JSON.decode(response.responseText);
var gmap = Ext.getCmp('gmap-base');
var mapa = Ext.getCmp('gmap-base').getMap();
var darwin = new google.maps.LatLng(eval(obj[1][0].googlelat),eval(obj[1][0].googlelong*-1));
mapa.setZoom(16);
mapa.setCenter(darwin);
gmap.lastCenter = darwin;
}
});
}
}*/

this.callParent(arguments);
}
});


I will appreciate Any help!!
Thanks.

mitchellsimoens
21 Mar 2012, 8:59 AM
This little test case works in 4.0.7 and 4.1.0 RC1


var panel = new Ext.panel.Panel({
renderTo : document.body,
width : 400,
height : 400,
layout : 'accordion',
items : [
{
title : 'One',
html : 'One'
},
{
title : 'Two',
html : 'Two'
}
]
});

setTimeout(function() {
console.log('adding items');

panel.add([
{
title : 'Three',
html : 'Three'
},
{
title : 'Four',
html : 'Four'
}
]);
}, 2000);

luisparada
21 Mar 2012, 1:24 PM
How is it possible?? I've been having a lot of issues with the rendering time of components, for example, if you see my code in the controller you will find that I'm already loading a delayed task to be able to add markers to the map because I tried using afterrenderer, afterlayout and those events occurs too fast so it doesn't give time to the application to create the objects and necessary DOM objects to place the rest after everything is showed up not renderer... the only thing I was able to control was a part of the application that triggers an small window, and in that case I loaded elements exactly when I want; it was thanks to the show behaviour of win panel, and its events. My question right now is, how can I manage to trigger events after my store has been loaded and also after my central map in the viewport has been showed?? remember that the central map belongs to a border layout inside a viewport so it doesn't allow to manage events after show for example...

This is the part of the code I think is not a good idea at all:


init: function() {
store = Ext.getStore('TrackingLogs');
store.load();
var task = new Ext.util.DelayedTask(function(){
this.addMarkers(store);
this.addVehiclesList(store);
},this);
task.delay(5000);
},

How can I replace that code for something more efficient, something that waits for all elements in viewport to be showed up and then add everything and rebuild the layout...

Also how you fix should work if I already have the add behaviour attached to an static delayed task ???


init: function() {
store = Ext.getStore('TrackingLogs');
store.load();
var task = new Ext.util.DelayedTask(function(){
this.addMarkers(store);
this.addVehiclesList(store);
},this);
task.delay(5000);
},

Thanks.

luisparada
21 Mar 2012, 1:32 PM
And it worked !!! but, is not efficient... do you know any other way to achieve the objective without delaying the addVehiclesList function and also the panel.add function ???
Thanks.