PDA

View Full Version : why listener fails



phamtranquocviet
11 Mar 2012, 12:32 PM
Why does adding the line in red below stops the application without giving any error in Firebug? Everything shows fine when taking that same line out. I am puzzling because Ext.panel.Panel, which is the class my AclTab class is inheriting, has a config called "listeners".

Thanks.



Ext.create("Ext.data.Store", {
storeId:"simpsonsStore",
fields:["name", "email", "phone"],
data:{"items":[
{ "name": "Lisa", "email":"[email protected]", "phone":"555-111-1224" },
{ "name": "Bart", "email":"[email protected]", "phone":"555-222-1234" },
{ "name": "Homer", "email":"[email protected]", "phone":"555-222-1244" },
{ "name": "Marge", "email":"[email protected]", "phone":"555-222-1254" },
{ "name": "Homer", "email":"[email protected]", "phone":"555-222-1244" },
{ "name": "Homer", "email":"[email protected]", "phone":"555-222-1244" },
{ "name": "Homer", "email":"[email protected]", "phone":"555-222-1244" },
{ "name": "Homer", "email":"[email protected]", "phone":"555-222-1244" },
{ "name": "Homer", "email":"[email protected]", "phone":"555-222-1244" },
{ "name": "Homer", "email":"[email protected]", "phone":"555-222-1244" }
]},
proxy: {
type: "memory",
reader: {
type: "json",
root: "items"
}
}
});

Ext.define("Iip.view.iip.adm.AclTab", {
extend: "Ext.panel.Panel",
alias:"widget.acl-tab",
title: Ext.ComponentQuery.query("#acl-menu-item")[0].title,
controllers: ["iip.adm.Acls"],
id: "acl-tab",
layout: {type: "table", columns: 3},
config: {
gridHeight: Ext.ComponentQuery.query("#admin-console-window-center-panel")[0].body.getHeight() / 3,
gridWidth: Ext.ComponentQuery.query("#admin-console-window-center-panel")[0].body.getWidth() / 3
},

initController: function(aclTabPanel, opts) {
console.log("init controller...");
},

listeners: {
{afterrender: this.initController}
},

initComponent: function(){
Ext.apply(this, {
items: [
{html: ""}, this.createUserGrid(), {html: ""},
this.createRoleGrid(), this.createWorkspaceGrid(), this.createPriviledgeGrid(),
{html: ""}, this.createResourceGrid(), {html: ""}
]
});
this.callParent(arguments);
},

createUserGrid: function() {
return Ext.create("Ext.grid.Panel", {
title: "Users",
store: Ext.data.StoreManager.lookup("simpsonsStore"),
selType: "rowmodel",
id: "acl-tab-user-grid",
columns: [
{ header: "Name", dataIndex: "name" },
{ header: "Email", dataIndex: "email", flex: 1 },
{ header: "Phone", dataIndex: "phone" }
],
height: this.config.gridHeight,
width: this.config.gridWidth
});
},

createRoleGrid: function() {
return Ext.create("Ext.grid.Panel", {
title: "Roles",
store: Ext.data.StoreManager.lookup("simpsonsStore"),
selType: "rowmodel",
id: "acl-tab-role-grid",
columns: [
{ header: "Name", dataIndex: "name" },
{ header: "Email", dataIndex: "email", flex: 1 },
{ header: "Phone", dataIndex: "phone" }
],
height: this.config.gridHeight,
width: this.config.gridWidth
});
},

createWorkspaceGrid: function() {
return Ext.create("Ext.grid.Panel", {
title: "Workspace",
store: Ext.data.StoreManager.lookup("simpsonsStore"),
selType: "rowmodel",
id: "acl-tab-workspace-grid",
columns: [
{ header: "Name", dataIndex: "name" },
{ header: "Email", dataIndex: "email", flex: 1 },
{ header: "Phone", dataIndex: "phone" }
],
height: this.config.gridHeight,
width: this.config.gridWidth
});
},

createPriviledgeGrid: function() {
return Ext.create("Ext.grid.Panel", {
title: "Privileges",
store: Ext.data.StoreManager.lookup("simpsonsStore"),
selType: "rowmodel",
id: "acl-tab-privilege-grid",
columns: [
{ header: "Name", dataIndex: "name" },
{ header: "Email", dataIndex: "email", flex: 1 },
{ header: "Phone", dataIndex: "phone" }
],
height: this.config.gridHeight,
width: this.config.gridWidth
});
},

createResourceGrid: function() {
return Ext.create("Ext.grid.Panel", {
title: "Resources",
store: Ext.data.StoreManager.lookup("simpsonsStore"),
selType: "rowmodel",
id: "acl-tab-resource-grid",
columns: [
{ header: "Name", dataIndex: "name" },
{ header: "Email", dataIndex: "email", flex: 1 },
{ header: "Phone", dataIndex: "phone" }
],
height: this.config.gridHeight,
width: this.config.gridWidth
});
}
});

vietits
11 Mar 2012, 4:07 PM
You should fix your code as below


listeners: {
// {afterrender: this.initController}
afterrender: this.initController
},

phamtranquocviet
17 Mar 2012, 2:05 PM
Thanks vietits.