PDA

View Full Version : grid in tab panel-please help!!



rg87
31 Jan 2008, 1:23 AM
hi!!am really new to ext js and am stuck while working with the layout(complex layout example).I tried placing the grid in the tab panel in the centre region.But,the whole layout got messed up.T know this topic is beaten to death.And am sure i must have done something pretty silly.I would be really grateful if somebody could help me out with it.



var fm = Ext.form;

Ext.onReady(function(){

creategrid();
createtab();
createLayout();

});



creategrid=function(){
Ext.QuickTips.init();

function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
// var fm = Ext.form;



// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)

var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 220,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "Price",
dataIndex: 'price',
width: 70,
//align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},

]);

// by default columns are sortable
cm.defaultSortable = true;

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
// {name: 'indoor', type: 'bool'}
]);

// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'plants.xml',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),

sortInfo:{field:'common', direction:'ASC'}
});

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
title:'editGrid',
renderTo: 'editor-grid',
//width:600,
// height:300,
width:'auto',
height:'auto',
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
layout:'fit',

clicksToEdit:1,

tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});

/* var rz = new Ext.Resizable('edit-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 'all'
});*/


// rz.on('resize', grid.autoSize, grid);




// render it
grid.render();
// trigger the data store load
store.load();
};





createtab=function(){
mytab=new Ext.TabPanel({
border:false,
activeTab:1,
tabPosition:'bottom',
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll:true
},
new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})]
})
};





createLayout=function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
}, {
region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
mytab,
},
{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Navigation',
border:false,
iconCls:'nav'
},{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},
new Ext.TabPanel({
region:'center',
id:'centre-panel',
deferredRender:false,
activeTab:0,
items:[{

id:'thecentre',
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true


},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
},
grid
]

})
]

});

// panelGrid = new Ext.GridPanel(grid, {title: 'PanelGrid'});
var centerpanel=Ext.getCmp('centre-panel');
//centerpanel.add('panelGrid');
centerPanel.doLayout();



Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});
};

RWaters
31 Jan 2008, 10:37 AM
Moved from 1.x to 2.0

This is an awful lot of code to go through. Can you narrow down the problem to specific components? Also a description of what is actually happening, perhaps even some screenshots may help.

tunaboo
31 Jan 2008, 10:49 AM
See 1 bug so far



region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
mytab,
},


Need to get rid of the , after mytab to render in IE

rg87
1 Feb 2008, 12:26 AM
thanks a lot for replying!!!:)
Well,the problem is that when i add the grid as one of the items of the tab panel in the centre region,the whole layout gets messed up(with_grid.png).Just the grid gets displayed.


createLayout=function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
}, {
region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
mytab,
},
{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Navigation',
border:false,
iconCls:'nav'
},{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},
new Ext.TabPanel({
region:'center',
id:'centre-panel',
deferredRender:false,
activeTab:0,
items:[{

id:'thecentre',
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true


},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
},
grid
]

})
]

});

// panelGrid = new Ext.GridPanel(grid, {title: 'PanelGrid'});
var centerpanel=Ext.getCmp('centre-panel');
//centerpanel.add('panelGrid');
centerPanel.doLayout();



Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});
};

Condor
1 Feb 2008, 12:35 AM
Don't use render(), applyToMarkup(), renderTo, applyTo or el in a layout!

Instead of rendering a component, add it to the container and relayout, e.g.


Ext.getCmp('centre-panel').add(grid);
Ext.getCmp('centre-panel').doLayout();

rg87
7 Feb 2008, 1:30 AM
hi!!!!thanks a lot for all the help...
i tried your suggestions...but,the layout is still messed up.its still the same.
As i said,am really new to ext js.I might be doing something really foolish!
Hoping to get this fixed soon!
Thanks again!! :)

CINUE
3 Jul 2008, 11:23 AM
I have my Grid Panel in a Tab Panel, in IE the grid columns width is more long that the panel width. In Firefox all are ok, but only in IE6 happen this.

TabPanel Config:


cls: "innerTabPanel",
targetID: sTargetID,
layout: 'fit',
title: tabTitle,
html: '<div id="' + idDiv + '" ></div>',
closable:true,
autoScroll:true,
enableTabScroll: true,
//autoWidth: true,


Grid Config:



autoExpandColumn: PJEM.defBdd.getStructure(table,"autoExpandColumn"),
autoExpandMax: 200,
colModel: _getColModel(name, table), //gets the ColumnModel object to use (cm: is shorthand)
frame:true,
autoHeight:true,
autoWidth:true,
autoScroll:true,
loadMask: true,
viewConfig:{forceFit:true,autoFill:false},
trackMouseOver:false,
plugins:[plugFilters[name], plugRecordForm[name]],
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//true to limit row selection to 1 row})
store: PJEM.defBdd.ds[name], //the DataStore object to use (ds: is shorthand)
stripeRows: true,//applies css classname to alternate rows, defaults to false
bbar: new Ext.PagingToolbar({
plugins: [plugPagers, plugFilters[name]],
pageSize: PJEM.esqueleto.parPage,//default is 20
store: PJEM.defBdd.ds[name],
displayInfo: true,//default is false (to not show displayMsg)
displayMsg: '{0} - {1} de {2}',
emptyMsg: "Ningun registro!"
}),
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Resultados" : "Resultado"]})'
})

CINUE
10 Jul 2008, 6:18 AM
Somebody knows how fix this problem in IE6????????????

Animal
10 Jul 2008, 6:22 AM
What problem? We have NO idea what you are doing.

CINUE
11 Jul 2008, 7:36 AM
Look the screenshots.

Animal
11 Jul 2008, 7:38 AM
We still don't know how you are getting that GridPanel into that TabPanel.

The little snippets of config are no help.

CINUE
11 Jul 2008, 9:13 AM
function oGrid (name, table, pKeys) {
var obj={
autoExpandColumn: PJEM.defBdd.obtieneEstructura(table,"autoExpandColumn"),
autoExpandMax: 200,
colModel: _ObtieneColumnModel(name, table), //Obtiene el ColumnModel del grid
frame:true,
autoHeight:true,
enableColumnHide: false,
//autoWidth:true,
autoScroll:true,
loadMask: true,
viewConfig:{forceFit:true,autoFill:false},
trackMouseOver:false,
plugins:[plugFiltro[name], plugRecordForm[name]],
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),//permite solo seleccionar un registro
store: PJEM.defBdd.ds[name], //el Objeto DataStore a usar
stripeRows: true,//aplica una clase css al alternar filas
bbar: new Ext.PagingToolbar({
plugins: [plugPaginacion, plugFiltro[name]],
pageSize: PJEM.esqueleto.porPagina,
store: PJEM.defBdd.ds[name],
displayInfo: true,
displayMsg: '{0} - {1} de {2}',
emptyMsg: "Ningun registro!"
}),
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Resultados" : "Resultado"]})'
})
};

return obj; //return
} // oEditorGrid

this.gridTabPanel= new Ext.grid.GridPanel(oGrid(name, table, pKeys));

var idDiv='tabPanel' + countTabPanel;
var idTab=oPanel.add({
cls: "innerTabPanel",
targetID: sTargetID,
layout: 'fit',
title: tabTitle,
html: '<div id="' + idDiv + '" ></div>',
closable:true,
autoScroll:true,
enableTabScroll: true,
//autoWidth: true,
listeners: {
destroy: function (me) {
delete memoryTabPanel2action[me.targetID];
}
},
iconCls: tabIcone
}).show();


this.gridTabPanel.render(idDiv);

Animal
11 Jul 2008, 9:20 AM
Finally!

Why are you rendering?

It's the owner Container of a Component that decides where and where to render.

Why are you showing?

It's the owner Container of a Component that decides where and where to show. For a TabPanel, you call setActiveTab

CINUE
11 Jul 2008, 9:46 AM
Thanks animal, i fix the problem.
I get the created panel and I change render the grid in Tab to adding the grid to the container(Tab) and later apply the layout.


PJEM.esqueleto.oMainPanel.getItem(idDiv).add(PJEM.defGrid.gridTabPanel);
PJEM.esqueleto.oMainPanel.getItem(idDiv).doLayout();