PDA

View Full Version : Help with Events/Listeners MVC



mindstuff
7 Dec 2010, 5:40 PM
I just started using Sencha last week so I'm a bit low on the learning curve.

I need some help. I have a 'view' which is an Ext.Panel that contains a Ext.List and a toolbar.

The button in the toolbar needs to trigger the controller telling it to load a different view which will switch the 'list' to a 'grid' presentation of the same data. Essentially swapping the views.

What is the best way to achieve this event listener connection?

I've included my current code below (that works) but don't know if there is a better cleaner way.

Here is the view:


foobar.views.productList = Ext.extend(Ext.Panel, {
id: 'productList',
cls: 'productList',
fullscreen:true,

items: [{
xtype: 'dataList'
}],

initComponent: function() {

this.addEvents({
'toggleProductView': true
});

// copy configured listeners into this object so that the
// base class's constructor will add them
//this.listeners = config.listeners;

foobar.views.productList.superclass.initComponent.apply(this, arguments);

},

toggleProductView: function() {
alert('event fired');
this.fireEvent('toggleProductView');
},

dockedItems: [
{
id: 'productDetailToolbar',
xtype: 'toolbar',
dock: 'top',
title: "Some Product Category",
items: [{
id: 'productViewBtn',
text: 'Product View',
enableBubble: ['tap'],
handler: function() {
var productList = Ext.getCmp('productList');
productList.toggleProductView();
}
}]
}
]

});

Ext.reg('productList', foobar.views.productList);Here is the controller:

show: function(options) {

// options.instance is store
var data = options.instance;

var store = data.data;

// renderthe view, load it with the store
var list = this.list;
if (!list) {
var that = this;
list = this.list = this.render({
xtype: 'productList',
store: store,
listeners: {
toggleProductView: function() {
that.showGrid();
}
}
});
}

Ext.getCmp('viewport').setActiveItem(list);
},

// display product list in grid
showGrid: function() {
var store = Ext.getStore('data');
var grid = this.grid;
if (!grid) {
grid = this.grid = this.render({
xtype: 'productGrid',
store: store.data
})
}

Ext.getComp('viewport').setActiveItem(grid);
}

mindstuff
8 Dec 2010, 10:44 AM
In case anyone was wondering I think this is a better/cleaner way to handle the connection of the button's tap event and then firing off the custom event:


foobar.views.productList = Ext.extend(Ext.Panel, {
id: 'productList',
cls: 'productList',
fullscreen:true,

items: [{
xtype: 'dataList'
}],

initComponent: function() {


// copy configured listeners into this object so that the
// base class's constructor will add them
//this.listeners = config.listeners;

foobar.views.productList.superclass.initComponent.apply(this, arguments);

this.addEvents({
'toggleProductView': true
});

// fire custom event when 'change view' button is clicked in the toolbar
var productViewBtn = Ext.getCmp('productViewBtn');
if(productViewBtn) {
productViewBtn.addListener({
el: {
tap: function(e) {
this.fireEvent('toggleProductView', e.type, e);
},
// productList scope
scope: this
}
})
}
},

dockedItems: [{
id: 'productDetailToolbar',
xtype: 'toolbar',
dock: 'top',
title: "Some Product Category",
items: [{
id: 'productViewBtn',
text: 'Product View'
}]
}]

});

Ext.reg('productList', foobar.views.productList);