PDA

View Full Version : Ext.ux.touch.grid.View under Ext.Panel



tino7_03
15 Jan 2012, 12:43 AM
I have an Ext.ux.touch.grid.View under a Ext.Panel like this



Ext.create('Ext.Panel', {
config:{
items:[
Ext.create('Ext.ux.touch.grid.View', {
fullscreen : true,

.
.
.
.

and it works fine.

But if I use "fullscreen:true" under the panel like this:



Ext.create('Ext.Panel', {
config:{
fullscreen : true,
items:[
Ext.create('Ext.ux.touch.grid.View', {
.
.
.
.


the screen is empty...
I don't understand how I must use the grid in the panel in a MVC app, where I must have a fullscreen panel in the viewport...

Thanks in advance.

mitchellsimoens
15 Jan 2012, 1:57 PM
If you put fullscreen to true on a component, that component will be removed from it's parent and added to the Ext.Viewport. So the reason why you saw it in the first time is because Ext.Viewport is using card layout which will manage the size of the Ext.ux.touch.grid.View. So if you want to wrap the grid within an Ext.Panel then the Ext.Panel needs to use a layout manager like fit.

tino7_03
15 Jan 2012, 11:00 PM
thanks for your reply,
I have tryed with this code:



Ext.define('GpMobile.view.Customers', {
extend: 'Ext.Panel',
alias : 'widget.customers',
config:{
fullscreen:true,
items:[
new Ext.create('Ext.Panel',{


layout:'fit',
items:[

Ext.create('Ext.ux.touch.grid.View', {
id:'gv_customers',
name:'gv_customers',
store : Ext.create('GpMobile.store.Customers'),
features : [
{
ftype : 'Ext.ux.touch.grid.feature.HeaderMenu',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Paging',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.FilterRow',
launchFn : 'initialize',
filtersDisabled:true
}
],
columns : [
{
header : 'Ragione sociale',
dataIndex : 'an_descr1',
width : '100%',
sortable : true
}
]
})

]





})

]


}
});

but the screen is always empty. If I try with "vbox" layout the grid is visible, but the data are not visible (and the store is full)....

tino7_03
15 Jan 2012, 11:16 PM
Solved!!!!



Ext.define('GpMobile.view.Customers', {
extend: 'Ext.Panel',
alias : 'widget.customers',
config:{
fullscreen:true,
layout:'fit',
items:[

Ext.create('Ext.ux.touch.grid.View', {
id:'gv_customers',
name:'gv_customers',
store : Ext.create('GpMobile.store.Customers'),
features : [
{
ftype : 'Ext.ux.touch.grid.feature.HeaderMenu',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Paging',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.FilterRow',
launchFn : 'initialize',
filtersDisabled:true
}
],
columns : [
{
header : 'Ragione sociale',
dataIndex : 'an_descr1',
width : '100%',
sortable : true
}
]
})
]


}




});


Thanks for your help mitchellsimoens

mitchellsimoens
16 Jan 2012, 5:58 AM
You shouldn't use Ext.create within the config object like that. Use the xtype way:


{
xtype : 'touchgridpanel'
}