PDA

View Full Version : Web Desktop Example's Module



switchover
16 Jan 2013, 12:26 AM
Hi everyone..

I'm a newcomer.. about Ext JS..

I'm trying to develop desktop-style web application utilizing Web Desktop example from Sencha..

My code is..



Ext.define('AdminApp.UserMgmt', {
extend: 'Ext.ux.desktop.Module',


mixins: {
observable: 'Ext.util.Observable'
},

requires: [
'AdminApp.view.user.UserList',
'AdminApp.view.user.UserEdit'
],

id:'userMgmt',

init : function(){
this.launcher = {
text: 'User Mgmt.',
iconCls:'bogus'
}
},

hasListeners:{},

createWindow : function(){
console.log(this);
var desktop = this.app.getDesktop();
var win = desktop.getWindow('userMgmt');
if(!win){
win = desktop.createWindow({
id: 'userMgmt',
title:'User Mgmt.',
width:640,
height:480,
iconCls: 'bogus',
animCollapse:true,
border: false,
listeners: {},
layout: 'border',
defaults: {
collapsible: true,
split: true,
titleCollapse: true,
bodyStyle: 'padding:15px'
},
items: [
{
xtype: 'userlist',
title: 'List',
region: 'center',
collapsible: false,
//align: 'stretch',
html: 'List'
}, {
xtype: 'useredit',
title: 'Add/Edit',
region: 'east',
width: '95%',
//align: 'stretch',
collapsed: true,
html: 'Add/Edit'
}
]
});
}
return win;
}
});




Ext.define('AdminApp.view.user.UserList', {
extend: 'Ext.panel.Panel',


mixins: {
observable: 'Ext.util.Observable'
},

alias: 'widget.userlist',

constructor:function() {
console.log('UserListconstructed');
},

title: 'Search',
html: 'Search'
});




Ext.define('AdminApp.view.user.UserEdit', {
extend: 'Ext.panel.Panel',


mixins: {
observable: 'Ext.util.Observable'
},

alias: 'widget.useredit',

constructor:function() {
console.log('UserEditconstructed');
},

title: 'Add/Edit',
html: 'Add/Edit'
});


However.. error occurs as follows..

UserList constructed UserList.js:11 (http://localhost:8080/admin/app/view/user/UserList.js?_dc=1358323881199)
UserEdit constructed UserEdit.js:11 (http://localhost:8080/admin/app/view/user/UserEdit.js?_dc=1358323881199)


Uncaught TypeError: Cannot read property 'added' of undefined AbstractComponent.js:2773 (http://localhost:8080/admin/ext/src/AbstractComponent.js?_dc=1358323881480)

Ext.define.onAddedAbstractComponent.js:2773 (http://localhost:8080/admin/ext/src/AbstractComponent.js?_dc=1358323881480)
Base.implement.callParentext-debug.js:3939 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.onAddedContainer.js:172 (http://localhost:8080/admin/ext/src/container/Container.js?_dc=1358323881220)
Ext.define.addAbstractContainer.js:585 (http://localhost:8080/admin/ext/src/container/AbstractContainer.js?_dc=1358323881430)
Ext.define.initItemsAbstractContainer.js:326 (http://localhost:8080/admin/ext/src/container/AbstractContainer.js?_dc=1358323881430)
Base.implement.callParentext-debug.js:3939 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.initItemsAbstractPanel.js:170 (http://localhost:8080/admin/ext/src/panel/AbstractPanel.js?_dc=1358323881453)
Ext.define.initComponentAbstractContainer.js:304 (http://localhost:8080/admin/ext/src/container/AbstractContainer.js?_dc=1358323881430)
Base.implement.callParentext-debug.js:3939 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.initComponentAbstractPanel.js:160 (http://localhost:8080/admin/ext/src/panel/AbstractPanel.js?_dc=1358323881453)
Base.implement.callParentext-debug.js:3939 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.initComponentPanel.js:513 (http://localhost:8080/admin/ext/src/panel/Panel.js?_dc=1358323881228)
Base.implement.callParentext-debug.js:3939 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.initComponentWindow.js:248 (http://localhost:8080/admin/ext/src/window/Window.js?_dc=1358323881162)
Ext.define.constructorAbstractComponent.js:1180 (http://localhost:8080/admin/ext/src/AbstractComponent.js?_dc=1358323881480)
Base.implement.callParentext-debug.js:3939 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.constructorComponent.js:348 (http://localhost:8080/admin/ext/src/Component.js?_dc=1358323881247)
constructorext-debug.js:4562 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.createWindowDesktop.js:300 (http://localhost:8080/admin/desktop/js/Desktop.js?_dc=1358323881170)
Ext.define.createWindowUserMgmt.js:37 (http://localhost:8080/admin/app/UserMgmt.js?_dc=1358323881146)
Ext.define.createWindowApp.js:109 (http://localhost:8080/admin/desktop/js/App.js?_dc=1358323881142)
(anonymous function)ext-debug.js:1890 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.apply.callbackext-debug.js:6820 (http://localhost:8080/admin/ext/ext-debug.js)
Ext.define.onClickItem.js:358 (http://localhost:8080/admin/ext/src/menu/Item.js?_dc=1358323882089)
Ext.define.onClickMenu.js:397 (http://localhost:8080/admin/ext/src/menu/Menu.js?_dc=1358323881969)
(anonymous function)
wrap



What's the problem??

Thank you in advance...

mitchellsimoens
17 Jan 2013, 1:47 PM
You have to be careful when you use methods used in the superclasses. For instance you have this


constructor:function() {
console.log('UserEditconstructed');
}

What that will do is never call the constructor of any superclass of the class you are defining. What you need is to call the parent like:


constructor:function() {
console.log('UserEditconstructed');

this.callParent(arguments);
}

switchover
17 Jan 2013, 7:37 PM
Wow!! Thank you a lot....

Your knowledge helped me a lot...