PDA

View Full Version : Refresh list in oreilly example



peterparker505
18 Jun 2011, 1:36 PM
I'm working with the Oreilly example app and I'd like to add refresh functionality to the Session list (SessionList.js). I am able to add the refresh button to the toolbar however I'm not able to get the list to actually reload. I've tried several different approaches but there is a gap in my understanding on how to do this the correct way - as I'm new to sencha touch/ext.js.

In SessionList under initComponent there is the following code:

this.listpanel = new Ext.Panel({
items: this.list,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
title: this.confTitle
}],
listeners: {
activate: { fn: function(){
this.list.getSelectionModel().deselectAll();
Ext.repaint();
}, scope: this }
}
})I've modified it to add a refresh button w/handler like so:

this.listpanel = new Ext.Panel({
items: this.list,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
title: this.confTitle,
items: [{
xtype: 'button',
ui: 'light',
iconMask: true,
iconCls: 'refresh',
dock: 'right',
stretch: false,
handler: function(event, btn) {
alert('refresh');
}
}]
}],
listeners: {
activate: {fn: function(){
this.list.getSelectionModel().deselectAll();
Ext.repaint();
}, scope: this}
}In the handler I've tried this.list.load() and various others but nothing did the trick. I'd greatly appreciate anyone that can help in explaining the right way to do this! Thanks!

Jack9
18 Jun 2011, 2:32 PM
// Class definition
MY.LIST.COMPONENT = Ext.extend(Ext.Panel, {
initComponent:function() {
var inst = this; // THIS IS THE TRICK for easy scoping
var config = {
,title:'Title'
,dockedItems: [{
xtype: 'toolbar',
title: this.confTitle,
items: [{
xtype: 'button',
ui: 'light',
iconMask: true,
iconCls: 'refresh',
dock: 'right',
stretch: false,
handler: function(event, btn) {
inst.list.store.load();
}
}]
}]
,items:[
inst.list = new List({ // 'this' or 'inst' is fine here, went for clarity
emptyText: 'blah
,itemTpl: SomeTemplate
,store: someStore
,listeners:{
itemtap:function(list, index, elem, e){ // listeners for list
var record = this.getRecord(elem);
}
}
})
]
,listeners:{ // listeners for PANEL
}
}; // eo config object

Ext.apply(this, Ext.apply(config, this.initialConfig));

MY.LIST.COMPONENTt.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});

new MY.LIST.COMPONENT({layout:'fit'}); // or just an id usually

peterparker505
18 Jun 2011, 3:16 PM
That was very helpful, thanks a ton!

I've got it working, but a little different from your code sample. Seems like the key was the "var inst = this;" in the initComponent. Then I just added "inst.list.store.load()" as the handler.


initComponent: function() {
var inst = this;
this.list = new Ext.List({
grouped: true,
itemTpl: '<span class="name">{name}</span> <span class="secondary">{symbol}</span>',
loadingText: false,
store: new Ext.data.Store({
...MY STORE STUFF...
})
});

this.list.on('selectionchange', this.onSelect, this);

this.list.on('render', function(){
this.list.store.load();
//this.list.el.mask('<span class="top"></span><span class="right"></span><span class="bottom"></span><span class="left"></span>', 'x-spinner', false);
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
}, this);

this.listpanel = new Ext.Panel({
items: this.list,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
title: this.confTitle,
items: [{
xtype: 'button',
ui: 'light',
iconMask: true,
iconCls: 'refresh',
dock: 'right',
stretch: false,
handler: function(event, btn) {
Ext.getBody().mask('Loading...', 'x-mask-loading', false);
inst.list.store.load();
}
}]
}],
listeners: {
activate: {fn: function(){
this.list.getSelectionModel().deselectAll();
Ext.repaint();
}, scope: this}
}
...ETC...If there is anything fundamentally wrong with this please let me know. Otherwise, it appears to be working great for now.

Thanks again!