PDA

View Full Version : How to fill a grid on a window?



Elfayer
14 Aug 2012, 4:54 AM
Hi,

I don't succeed on filling a grid on a window, What config can I use? :

37933

The layout of the window is fit.

Farish
14 Aug 2012, 5:03 AM
Use flex: 1 in your grid.

Elfayer
14 Aug 2012, 5:09 AM
Hm.. flex is not a config of a grid, isn't it?

Farish
14 Aug 2012, 5:18 AM
no but its used for layout. flex: 1 means that this grid will occupy available space with a ratio of 1. Since there are no other components in the window, it will take up the whole space.

evant
14 Aug 2012, 5:19 AM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Fit

Elfayer
14 Aug 2012, 5:20 AM
There is a toolbar on the window (red on the picture), and I tried flex: 1, it does nothing.. =/

EDIT: Same for the layout: 'fit',

Farish
14 Aug 2012, 5:24 AM
cant say without looking at your code. the grid should take up the place left in the window (after taking into account the space taken by the toolbar)

Elfayer
14 Aug 2012, 5:25 AM
Ext.define('ADM.view.News', {
extend: 'Ext.grid.Panel',
alias: 'widget.News',

store: 'News',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})
],
columns: [{
header: '<center>Label</center>',
dataIndex: 'new_label',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Description</center>',
dataIndex: 'new_description',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>URL</center>',
dataIndex: 'new_url',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
field: { xtype: 'textfield' }
}, {
header: '<center>Date Start</center>',
dataIndex: 'new_start_date',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
renderer: Ext.util.Format.dateRenderer('d-m-Y'),
field: { xtype: 'datefield' }
}, {
header: '<center>Date End</center>',
dataIndex: 'new_end_date',
align: 'center',
flex: 1,
sortable: true,
hideable: false,
renderer: Ext.util.Format.dateRenderer('d-m-Y'),
field: { xtype: 'datefield' }
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ text: 'Add', itemId: 'addNews' },
'-',
{ text: 'Save', itemId: 'saveNews' }
]
}]
})

evant
14 Aug 2012, 5:26 AM
It has nothing to do with the grid, it's the container you're putting it in. That should have the fit layout, would suggest you read the docs I linked.

sword-it
14 Aug 2012, 5:26 AM
Hi ,

Are you try with layout:'fit' config ? I tested it with 4.10 and 4.1.1 and it work, see the following sample example -http://jsfiddle.net/MvuF5/