scrollbars absent when tab with grid created dynamically
Posted on Jan 08, 2009 under xn--zqqs84h3is.com | editInitially when i add grid to the tabpanel,the scrollbars are rendered.
But,when i create tabpage dynamically,the scrollbars are absent.
Could somebody please help me with this?
grid1 = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
//width:1000,
//height:520,
//title: 'Edit Plants?',
frame: true,
layout:'fit',
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler: function(){
var p = new Plant({
A:'',
B:'',
C:'',
D:'',
E:'',
F:'',
G:'',
H:'',
I:'',
J:'',
K:'',
L:'',
M:'',
N:'',
O:'',
P:'',
Q:'',
R:'',
S:'',
T:'',
U:'',
V:'',
W:'',
X:'',
Y:'',
Z:''
});
grid1.stopEditing();
//ds.insert(0, p);
store.insert(lno, p);
grid1.startEditing(lno, 0);
lno=lno+1;
grid1.addListener('beforeedit', beforeEdit);
grid1.addListener('afteredit', afterEdit);
}
}, {
text: 'B',
handler: test
}, {
text: 'I',
handler: test2
}, {
text: 'F',
menu: menu
}, {
text: 'size',
menu: size_menu
}, {
text: 'b_col',
menu: colorMenu
}, {
text: 'fnt_col',
menu: fnt_colorMenu
}, {
text: 'Formluae',
//handler: formulae_handler
handler: create
}, {
text: 'GetJson',
//handler: formulae_handler
handler: myfunc
},{
text: 'newdatabase',
//handler: formulae_handler
handler:newdata
},{
text: 'update',
handler:getUpdates
}/*,{
text: 'undo',
handler:function(){
mainTimeline.undo();
}
},{
text: 'redo',
handler:function(){
mainTimeline.redo();
}
}*/]
});
tabpanel created:
new Ext.TabPanel({
region:'center',
id:'centre-panel',
deferredRender:false,
activeTab:0,
layoutOnTabChange:true,
tbar:[{text:'Create WorkBook',handler:createDoc},{text:'reena'}],
items:[grid1]
})
cnt=Ext.getCmp('centre-panel');
cnt.doLayout();
Tabpages created dynamically:
var grid1 = showGrid('/finalServer/createDoc.jsp');
var newtab=new Ext.Panel({
title:"Book1",
items:[grid1]
});
cnt.add(newtab);
cnt.setActiveTab(newtab);
cnt.doLayout();
i commented grid1.render() and returned object reference,the scrollbar is still absent.
Thanks a lot!!! :)
// create the Data Store
//console.log('inside showgrid');
cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{
header: "A",
dataIndex: 'A',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "B",
dataIndex: 'B',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "C",
dataIndex: 'C',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "D",
dataIndex: 'D',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "E",
dataIndex: 'E',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "F",
dataIndex: 'F',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "G",
dataIndex: 'G',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "H",
dataIndex: 'H',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "I",
dataIndex: 'I',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "J",
dataIndex: 'J',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "K",
dataIndex: 'K',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "L",
dataIndex: 'L',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "M",
dataIndex: 'M',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "N",
dataIndex: 'N',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "O",
dataIndex: 'O',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "P",
dataIndex: 'P',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "Q",
dataIndex: 'Q',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "R",
dataIndex: 'R',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "S",
dataIndex: 'S',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "T",
dataIndex: 'T',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "U",
dataIndex: 'U',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "V",
dataIndex: 'V',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "W",
dataIndex: 'W',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "X",
dataIndex: 'X',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "Y",
dataIndex: 'Y',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}, {
header: "Z",
dataIndex: 'Z',
width: 100,
renderer: set_style,
editor: new fm.TextField({
allowBlank: true
})
}]);
cm.defaultSortable = true;
Plant = Ext.data.Record.create([ // the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{
name: 'A',
type: 'string'
}, {
name: 'B',
type: 'string'
}, {
name: 'C',
type: 'string'
}, {
name: 'D',
type: 'string'
}, {
name: 'E',
type: 'string'
}, {
name: 'F',
type: 'string'
}, {
name: 'G',
type: 'string'
}, {
name: 'H',
type: 'string'
}, {
name: 'I',
type: 'string'
}, {
name: 'J',
type: 'string'
}, {
name: 'K',
type: 'string'
}, {
name: 'L',
type: 'string'
}, {
name: 'M',
type: 'string'
}, {
name: 'N',
type: 'string'
}, {
name: 'O',
type: 'string'
}, {
name: 'P',
type: 'string'
}, {
name: 'Q',
type: 'string'
}, {
name: 'R',
type: 'string'
}, {
name: 'S',
type: 'string'
}, {
name: 'T',
type: 'string'
}, {
name: 'U',
type: 'string'
}, {
name: 'V',
type: 'string'
}, {
name: 'W',
type: 'string'
}, {
name: 'X',
type: 'string'
}, {
name: 'Y',
type: 'string'
}, {
name: 'Z',
type: 'string'
}]);
var reader = new Ext.data.JsonReader({
root: "plant"
}, Plant);
store = new Ext.data.Store({
reader: reader,
remoteSort: true,
url:url,
//'/finalServer/newEmptyGrid.jsp',
//url:'/finalServer/createxl.jsp',
// url:'/finalServer/json.jsp',
listeners: {
load: function(){
console.log('load Worked!');
}
},
fields: [{
name: 'A',
type: 'string'
}, {
name: 'B',
type: 'string'
}, {
name: 'C',
type: 'string'
}, {
name: 'D',
type: 'string'
}, {
name: 'E',
type: 'string'
}, {
name: 'F',
type: 'string'
}, {
name: 'G',
type: 'string'
}, {
name: 'H',
type: 'string'
}, {
name: 'I',
type: 'string'
}, {
name: 'J',
type: 'string'
}, {
name: 'K',
type: 'string'
}, {
name: 'L',
type: 'string'
}, {
name: 'M',
type: 'string'
}, {
name: 'N',
type: 'string'
}, {
name: 'O',
type: 'string'
}, {
name: 'P',
type: 'string'
}, {
name: 'Q',
type: 'string'
}, {
name: 'R',
type: 'string'
}, {
name: 'S',
type: 'string'
}, {
name: 'T',
type: 'string'
}, {
name: 'U',
type: 'string'
}, {
name: 'V',
type: 'string'
}, {
name: 'W',
type: 'string'
}, {
name: 'X',
type: 'string'
}, {
name: 'Y',
type: 'string'
}, {
name: 'Z',
type: 'string'
}]
});
grid1 = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:1000,
height:520,
//title: 'Edit Plants?',
frame: true,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler: function(){
var p = new Plant({
A:'',
B:'',
C:'',
D:'',
E:'',
F:'',
G:'',
H:'',
I:'',
J:'',
K:'',
L:'',
M:'',
N:'',
O:'',
P:'',
Q:'',
R:'',
S:'',
T:'',
U:'',
V:'',
W:'',
X:'',
Y:'',
Z:''
});
grid1.stopEditing();
//ds.insert(0, p);
store.insert(lno, p);
grid1.startEditing(lno, 0);
lno=lno+1;
grid1.addListener('beforeedit', beforeEdit);
grid1.addListener('afteredit', afterEdit);
}
}, {
text: 'B',
handler: test
}, {
text: 'I',
handler: test2
}, {
text: 'F',
menu: menu
}, {
text: 'size',
menu: size_menu
}, {
text: 'b_col',
menu: colorMenu
}, {
text: 'fnt_col',
menu: fnt_colorMenu
}, {
text: 'Formluae',
//handler: formulae_handler
handler: create
}, {
text: 'GetJson',
//handler: formulae_handler
handler: myfunc
},{
text: 'newdatabase',
//handler: formulae_handler
handler:newdata
},{
text: 'update',
handler:getUpdates
}/*,{
text: 'undo',
handler:function(){
mainTimeline.undo();
}
},{
text: 'redo',
handler:function(){
mainTimeline.redo();
}
}*/]
});
grid1.addListener('beforeedit', beforeEdit);
grid1.addListener('afteredit', afterEdit);
// render it
grid1.render();
store.load();
return grid1;
}
title:"Book1",
items:[grid1]
});
cnt.add(newtab);
cnt.setActiveTab(newtab);
cnt.doLayout();
NO!!!!
For the 18,000,000th time!
WHY wrap the GridPanel INSIDE another Panel which has no layout and then add THAT Panel to the TabPanel???
Just
cnt.add(grid1);
cnt.setActiveTab(grid1);
cnt.doLayout();
I was "tired and emotional" at 8:52 PM yesterday ;)
#If you have any other info about this subject , Please add it free.# |
