PDA

View Full Version : How to create a table containing grids



phamtranquocviet
7 Mar 2012, 7:29 PM
I want to have a table of 3x3 that looks like the following. I want it in a table so that I can control the position of the grid.

Cell_1_is_empty Cell_2_is_a_grid Cell_3_is_empty
Cell_1_is_a_grid Cell_2_is_a_grid Cell_3_is_a_grid
Cell_1_is_empty Cell_2_is_a_grid Cell_3_is_empty

I tried the following, but it errors out this: this.createUserGrid is not a function What is the right way to do this? Thanks.


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},

createUserGrid: function() {
return Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
....
columns: [
...
],
height: 200,
width: 400,
});
},

items: [
{
html: ""
},
{
html: this.createUserGrid()
},
{
html: ""
},
{
html: "Cell A content"
},
{
html: "Cell B content"
},
{
html: "Cell C content"
},
{
html: ""
},
{
html: "Cell B content"
},
{
html: ""
}
]
});

vietits
7 Mar 2012, 8:33 PM
Try this


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},

createUserGrid: function() {
return Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
....
columns: [
...
],
height: 200,
width: 400,
});
},

initComponent: function(){
Ext.apply(this, {
items: [
{
html: ""
},
{
html: this.createUserGrid()
},
{
html: ""
},
{
html: "Cell A content"
},
{
html: "Cell B content"
},
{
html: "Cell C content"
},
{
html: ""
},
{
html: "Cell B content"
},
{
html: ""
}
]
});
this.callParent(arguments);
}
});

phamtranquocviet
10 Mar 2012, 8:09 AM
That got rid of the error. However, the second cell in the first row (where I call createUserGrid()) shows text of a grid object, not a grid with rows and columns. How do I have a grid in a cell? Thanks.

vietits
10 Mar 2012, 4:00 PM
You should fix as below:


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},

createUserGrid: function() {
return Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
....
columns: [
...
],
height: 200,
width: 400,
});
},

initComponent: function(){
Ext.apply(this, {
items: [
{
html: ""
},
//{
// html: this.createUserGrid()
//},
this.createUserGrid()
,
{
html: ""
},
{
html: "Cell A content"
},
{
html: "Cell B content"
},
{
html: "Cell C content"
},
{
html: ""
},
{
html: "Cell B content"
},
{
html: ""
}
]
});
this.callParent(arguments);
}
});

phamtranquocviet
11 Mar 2012, 3:58 AM
that works like a charm. Thanks.