PDA

View Full Version : Ext Grid Panel positioning in Viewport or something.



ramarajuv
5 Jun 2013, 1:26 PM
These are my first steps in ExtJS. So, this might sound to preliminary:

Please suggest how can I position my grids on a single page. I am trying to place 3 Grid Panels in two rows with decent space between each grid.Panel. I have three CRUD Grids populated with data from DB ( and it's store ):

var UserGrid = Ext.create('Ext.grid.Panel', { ... });
var RoleGrid = Ext.create('Ext.grid.Panel', { ... });
var Map = Ext.create('Ext.grid.Panel', { ... });

Now I want to place them in different positions like I mentioned earlier. So, I want to be able to refer to my existing Grids in the Viewport or something. I guess, I can do this using layout: 'absolute' in the Viewport and referring to the Grids. But how do I refer to the Grids that I have? What is the config or properties that I use?

That is one part of my question. Also, I am getting so annoyed with my inability to explore ExtJS documentation on Sencha. I know many people say it is elaborate. I am very confused what configs or properties or methods or events I use on a particular Ext JS object. The documentation does detail them on the top of the each Object page. But I am not able to get hold of when to use what to use. When do we use options given in 'config'? When do we use options given in 'properties'. When do we use options given in 'events'? More importantly how do we use them !!

glopes
5 Jun 2013, 10:59 PM
Many ways you can do that
viewport with anchor layout. Add a container to the first row with two grids and then add one grid to the second row.

viewport with table layout, set columns to 2. Add three grids and set colspan to 2 on the 3rd grid.

Set the itemId property of each grid and then use Ext.ComponentQuery.query to refer to each grid.

Code example below:



Ext.define('MyViewport', {
extend: 'Ext.container.Viewport',


layout: {
columns: 2,
type: 'table'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
itemId: 'userGrid',
width: 200,
title: 'User Grid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}
]
},
{
xtype: 'gridpanel',
itemId: 'roleGrid',
width: 200,
title: 'Role Grid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}
]
},
{
xtype: 'gridpanel',
colspan: 2,
itemId: 'mapGrid',
width: 400,
title: 'Map Grid',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}
]
}
]
});


me.callParent(arguments);
}


});

ramarajuv
6 Jun 2013, 7:30 PM
I will try and let you know the result. Thank you ... in advance :)