PDA

View Full Version : List disappears



pokiekokie
7 Feb 2011, 8:19 AM
When an item in a list is clicked, an other card(panel) is made active with information about the item. When the back-button is clicked, the other card is made active and the list is shown.

But occasionally the list wont show. It happens all the time when i click the first item, go back, click the last item, and then when i click the back-button the list is gone. What can be the cause?

var store = new Ext.data.JsonStore({
model : 'Speler',
sorters: [
{property: 'positie', direction: 'ASC'},
],
getGroupString : function(record) {
return record.get('positie');
},
proxy : {
type : 'ajax',
url : 'spelers.json',
reader : {
type : 'json',
root : 'spelers'

}
},
autoLoad : true

});



var spelersList = new Ext.List({

store : store,
itemTpl : new Ext.XTemplate(
'<tpl for=".">',
'<div class="contact">',
'{firstName} <strong>{lastName}</strong>',
'</div>',
'</tpl>'
),

singleSelect : true,
grouped : true




});


spelersList.on('itemtap', function(dataView, index, item, e){

var employee = dataView.store.data.items[index].data;
var template = new Ext.XTemplate(
'<p>{firstName} {lastName}</p>',
'<p>Positie: {positie}</p>',
'<p>Leeftijd: {leeftijd}</p>',
'<p><img src="{plaatje}"/></p>',
'<p>Bio: {bio}</p>'

);
var str = template.apply(employee);
spelersDetail.update(str);

myToolbar.insert(0,backButton);
myToolbar.doLayout();
spelersPanel.setActiveItem(1, {type: 'slide', direction: 'left'})
spelersLijst.doLayout() ;


});

var TapHandler = function (button, event){


spelersPanel.setActiveItem(0);
myToolbar.remove(0);myToolbar.doLayout();
console.log(spelersList);

}

var backButton = [{
id: 'backButton',
xtype: 'button',
text: 'back',ui: 'back',
handler: TapHandler

miroperez
2 Mar 2011, 6:22 PM
Are you doing anything in the detail to make the store items change which might cause the list to refresh? One thing I ran into recently was if you had a Dataview which was populated by a store which had say mulitple lists of arrays and say one of those arrays was bigger than the others. If you scrolled down that dataview with the bigger array, then switched the dataview to the smaller list, the smaller list doesn't show. The reason it doesn't show is because the dataview isn't resetting the scroll that the previous data set has in it. I had to modify the style to move the scroll back to 0 then it showed up again. It was there, you just had to look for in the inspector in Safari - that was how i figure out that the scroll wasn't getting reset so the items were out of view.

Riaz
2 Mar 2011, 7:44 PM
I have rewritten your partial code. Just inform me whether it is helping you or not.



spelersList.on('itemtap', function (dataView, index, item, e) {
var employee = dataView.store.data.items[index].data;

new Ext.Panel({
id: 'idspelersPanel',
fullscreen: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'BackButton',
handler: function () {
Ext.getCmp(' idspelersPanel ').destroy(); //[NOTE: when chick 'Back' button]
}


}]

},


], // [~END: dockedItems]
items: [{
xtype: 'dataview',
store: new Ext.data.Store({
//Codes
}),
itemSelector: 'div.users',




tpl: new Ext.XTemplate(
'<p>{firstName} {lastName}</p>',
'<p>Positie: {positie}</p>',
'<p>Leeftijd: {leeftijd}</p>',
'<p><img src="{plaatje}"/></p>',
'<p>Bio: {bio}</p>'
) //~End ext.xTemplate
}


]
})

});