PDA

View Full Version : For some reason can not add List inside Panel



ardnet
28 Jun 2011, 8:29 PM
Hi all, for some reason I can not add a List inside a Panel, here is the structure of my layout:

Viewport (Ext.Panel)

- Loginform (Ext.form.FormPanel)

- AccusationMainWrapper (Ext.TabPanel)

- BrowseAccusationWrapper (Ext.Panel)

- AccusationList (Ext.List) <-- this is the problem

- AccusationDetail (Ext.Panel)


The problem is, in BrowseAccusationWrapper.js (see code below), when I added "xtype: 'list'" under "items", it just shows white screen in my monitor. But when I added "panel" it's working

I debug using Firebug and it says:
Uncaught Error: Ext.List: itemTpl is a required configuration.
Sorry, not sure what does it mean actually.

Anyone can give some hint or clue maybe where did it go wrong?

Below is my entire code.

Thanks in advance.

Regards,
Ardi



//app.js
icorrect = new Ext.Application({
name: "icorrect",
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
this.views.Viewport = new this.views.Viewport();

}

});






//Viewport.js
icorrect.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [
{
xtype: "loginform"

},{
xtype: "accusationmainwrapper"
}

]

});





//Loginform.js
//not sure whether this is related to the problem, but I'll just put it in here anyway.
var loginFormElements = [{
xtype: 'textfield',
name : 'userid',
label: 'User ID',
required: true,
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: true
},
{xtype: 'spacer'},
{
xtype: 'togglefield',
label: 'Remember login',
name: 'rememberlogin'
},
{xtype: 'spacer'},
{
xtype: 'button',
name: 'submit',
text: 'Submit'
},
{
xtype: 'button',
name: 'iamnotamember',
text: 'I am not a member',
handler: function(){
icorrect.views.Viewport.setActiveItem(1);
}


}];

icorrect.views.Loginform = Ext.extend(Ext.form.FormPanel,{
dockedItems: [{
xtype: 'toolbar',
title: 'ICorrect'
}],
items: loginFormElements,
initComponent: function() {

icorrect.views.Loginform.superclass.initComponent.apply(this, arguments);

}


});

Ext.reg('loginform', icorrect.views.Loginform);





//AccusationMainWrapper.js
icorrect.views.AccusationMainWrapper = Ext.extend(Ext.TabPanel,{


initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {pack: 'center'}
},
items: [
{
xtype: 'browseaccusationwrapper',
iconCls: 'more',
title: 'Browse'

},
{
title: 'Correct',
xtype : 'addaccusationform',
iconCls: 'add'
},
{
title: 'My Account',
html : 'For My Account',
iconCls: 'user',
itemId: 'myaccountpage'
}
]

});

icorrect.views.AccusationMainWrapper.superclass.initComponent.apply(this, arguments);

}

});

Ext.reg('accusationmainwrapper', icorrect.views.AccusationMainWrapper);





//BrowseAccusationWrapper.js
icorrect.views.BrowseAccusationWrapper = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'ICorrect',
items: [{
text: 'Back',
ui: 'back',
handler: function(){
icorrect.views.Viewport.setActiveItem(0, {type:'slide', direction:'right'})
}
}]
}],
layout: 'card',
id: 'browseaccusationwrapper',
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'list' //<-- this is the problem, when I added 'list' in 'xtype'
},{
html: 'accusationdetail'
}]

});

icorrect.views.BrowseAccusationWrapper.superclass.initComponent.apply(this, arguments);

}

});

Ext.reg('browseaccusationwrapper', icorrect.views.BrowseAccusationWrapper);

ardnet
28 Jun 2011, 8:41 PM
Nevermind, It's working actually, I supposed I need to add another property like: itemTpl, and store as well.