PDA

View Full Version : Ext.List isn't working



glarotech
8 Mar 2011, 2:55 AM
Hi

I've some troubles with the Ext.List component.

View:


MobileShop.views.Catgories = Ext.extend(Ext.List, {

id: 'ppsCategoryView',
allowDeselect: false,
singleSelect: true,
itemTpl : '{title}',
grouped : false,
indexBar: false,

initComponent: function() {

Ext.apply(this, {
store: Ext.getStore('categories')
});

MobileShop.Viewport.superclass.initComponent.apply(this, arguments);

}

});

Ext.reg('ppsCategoryView', MobileShop.views.Catgories);

All I get is a blank screen and the following exception:

TypeError: Result of expression 'this.setLayout' [undefined] is not a function.

As soon as I extend the MobileShop.views.Categories from Ext.Panel instead of Ext.List, everything is working fine and my application is loading (TabBar, Toolbar).

The ppsCategoryView will be loaded by the viewport (TabBar).
Model and store are working properly (console.log of the store will print all items).

Model:


Ext.regModel('category', {
fields: ['parent','id','title']
});

Store:


Ext.regStore('categories', {
model: 'category',
autoLoad: true,

proxy: {
type: 'ajax',

url: '/mobileshop/json/categories.php',

reader: {
type: 'json',
root: 'data'
},

listeners: {
exception: function() { console.log('HTTP error occured'); }
}

}
});

JSON data of /mobileshop/json/categories.php:


{"success":true,"data":[{"parent":"","id":"01","title":"Top 1"},{"parent":"","id":"02","title":"Top 2"},{"parent":"","id":"03","title":"Top 3"},{"parent":"01","id":"01.01","title":"Foo 1"},{"parent":"01","id":"01.02","title":"Foo 2"},{"parent":"01","id":"01.03","title":"Foo 3"},{"parent":"02","id":"02.01","title":"Bar 1"},{"parent":"02","id":"02.02","title":"Bar 2"}]}

- domi

8 Mar 2011, 3:54 AM
Domi,

What is the parent container for MobileShop.views.Catgories ?

glarotech
8 Mar 2011, 5:41 AM
The parent container is the main viewport (TabPanel) of the application:


/**
* @class MobileShop.Viewport
* @extends Ext.TabPanel
*/

MobileShop.Viewport = Ext.extend(Ext.TabPanel, {

// identifier
id: 'viewport',

// go fullscreen
fullscreen: true,

// initialize viewport
initComponent: function() {

Ext.apply(this, {

// set card layout (show only one child content/item)
layout: 'card',

// tab bar
tabBar: { dock: 'bottom',
layout: { pack: 'center' }
},

// empty toolbar when switching cards
listeners: {
beforecardswitch: function() {
toolbar = Ext.getCmp('ppsToolbar');
toolbar.removeAll();
}
},

// items on the viewport
items: [
{ xtype: 'ppsHomeView' },
{
xtype: 'panel',
html: 'foobar',
title: 'Featured',
iconCls: 'favorites'
},
{ xtype: 'ppsCategoryView' },
{ xtype: 'ppsBasketView' }
],

// show toolbar with logo
dockedItems: [
{
xtype: 'toolbar',
id: 'ppsToolbar'
}
]
});

MobileShop.Viewport.superclass.initComponent.apply(this, arguments);

}

});

SimonFlack
8 Mar 2011, 6:31 AM
MobileShop.views.Catgories = Ext.extend(Ext.List, {

id: 'ppsCategoryView',
allowDeselect: false,
singleSelect: true,
itemTpl : '{title}',
grouped : false,
indexBar: false,

initComponent: function() {

Ext.apply(this, {
store: Ext.getStore('categories')
});

MobileShop.Viewport.superclass.initComponent.apply(this, arguments);

}

});

Ext.reg('ppsCategoryView', MobileShop.views.Catgories);

Shouldn't it be:


MobileShop.views.Catgories.superclass.initComponent.apply(this, arguments);

glarotech
8 Mar 2011, 7:03 AM
oops... my (copy-paste) fault :">

I think I owe you a beer ;)

SimonFlack
8 Mar 2011, 7:12 AM
I think I owe you a beer

Sounds great. As a notorious "cut & paste"er myself I know how it feels.