Brendan Carroll
30 Sep 2007, 7:16 PM
First let me say how pleased I am with the Ext2 rollout. Great job! I'm a convert and I talk-up Ext whenever I get a chance.
I've been playing around with (Ext2-Alpha/.Net/WinXP/IE6/FF2.7) grids in accordian layouts and am experiencing issues in IE6. I realize we are at an alpha release but nonetheless.
I have a very simple accordian viewport with one panel loading a grid. Its loosley based (completely:))) on the examples. When the grid has defined width and height config params and the browser in resized within those extents, an error is thrown and the grid is no longer contained in the accrodian. Also, when maximizing the browser via maximize button, an error is thrown too. If i set my grid for autoheight and autowidht, i no loger get errors but the grid header grapics become scrambled. Also when Ext.state.Manager is enabled I get erors on startup after a resize in the previous session when my grid is in the accordian layout.
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.GridPanel({
el:'grid-example',
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});
grid.render();
grid.getSelectionModel().selectFirstRow();
//now build the SQL toolbar
var _tb_sql = new Ext.Toolbar();
_tb_sql.render('frm1');
_tb_sql.addText('Query Tools:');
_tb_sql.add('-', {
id: 'btnNew',
icon: _iconpath + 'wrench_orange.png',
cls: 'x-btn-icon',
tooltip: 'New Query'
});
_tb_sql.addSpacer();
_tb_sql.add('-', {
id: 'btnValidate',
icon: _iconpath + 'lightning.png',
cls: 'x-btn-icon',
tooltip: 'Validate Curent Query',
disabled:true
});
_tb_sql.add('-', {
id: 'btnAddTo',
icon: _iconpath + 'add.png',
cls: 'x-btn-icon',
tooltip: 'Add To Current Query',
disabled:true
});
_tb_sql.addSpacer();
_tb_sql.addSpacer();
_tb_sql.add('-', {
id: 'btnLoad',
icon: _iconpath + 'table_go.png',
cls: 'x-btn-icon',
tooltip: 'Load Results Grid View',
disabled:true
});
var tabs = new Ext.FormPanel({
labelAlign: 'top',
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio',
fieldLabel:'Biography'
}
}]
}]
});
tabs.render(Ext.get('frm1'));
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
//html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
//html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
region:'center',
id:'center-panel',
title:'Cedfdfsdnter',
margins:'35 5 5 0',
layout:'container',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
//html: Ext.example.shortBogusMarkup,
title:'Navigation',
contentEl: 'frm',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
//html: Ext.example.shortBogusMarkup,
contentEl: 'grid-example',
border:false,
autoScroll:true,
iconCls:'settings'
},{
title:'Settings',
//html: Ext.example.shortBogusMarkup,
contentEl: 'Div1',
border:false,
autoScroll:true,
iconCls:'settings'
},{
title:'Settings',
contentEl: 'Div2',
border:false,
autoScroll:false,
iconCls:'settings'
}]
}]
});
});
</script>
</head>
<body>
<div id="frm"><div id="frm1"></div></div>
<div id="grid-example"></div>
<div id="Div1">dsfsdafascxvxcvxcvxcvxcvxcvxvxdfasdfasd</div>
<div id="Div2"><iframe src="Map.aspx" style="width: 100%; height: 100%; background-color: #d0def0;border: 1px solid #8db2e3;"></iframe></div>
</body>
</html>
On a completely differnt note, when trying to load a complicated .Net page into a panel I get an error at the following in ext-all. All the scripts in Map.aspx are external and/or an embbeded resource to support mapping tools (zoomin,out,etc).
window.execScript(match[2])
var p = new Ext.Panel({
autoLoad: {url:'Map.aspx',scripts:true},
autoHeight: true,
renderTo: 'Div2'
});
If i load the same page via an Iframe (as coded above), it works like a charm.
Great job guys!
I've been playing around with (Ext2-Alpha/.Net/WinXP/IE6/FF2.7) grids in accordian layouts and am experiencing issues in IE6. I realize we are at an alpha release but nonetheless.
I have a very simple accordian viewport with one panel loading a grid. Its loosley based (completely:))) on the examples. When the grid has defined width and height config params and the browser in resized within those extents, an error is thrown and the grid is no longer contained in the accrodian. Also, when maximizing the browser via maximize button, an error is thrown too. If i set my grid for autoheight and autowidht, i no loger get errors but the grid header grapics become scrambled. Also when Ext.state.Manager is enabled I get erors on startup after a resize in the previous session when my grid is in the accordian layout.
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.GridPanel({
el:'grid-example',
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});
grid.render();
grid.getSelectionModel().selectFirstRow();
//now build the SQL toolbar
var _tb_sql = new Ext.Toolbar();
_tb_sql.render('frm1');
_tb_sql.addText('Query Tools:');
_tb_sql.add('-', {
id: 'btnNew',
icon: _iconpath + 'wrench_orange.png',
cls: 'x-btn-icon',
tooltip: 'New Query'
});
_tb_sql.addSpacer();
_tb_sql.add('-', {
id: 'btnValidate',
icon: _iconpath + 'lightning.png',
cls: 'x-btn-icon',
tooltip: 'Validate Curent Query',
disabled:true
});
_tb_sql.add('-', {
id: 'btnAddTo',
icon: _iconpath + 'add.png',
cls: 'x-btn-icon',
tooltip: 'Add To Current Query',
disabled:true
});
_tb_sql.addSpacer();
_tb_sql.addSpacer();
_tb_sql.add('-', {
id: 'btnLoad',
icon: _iconpath + 'table_go.png',
cls: 'x-btn-icon',
tooltip: 'Load Results Grid View',
disabled:true
});
var tabs = new Ext.FormPanel({
labelAlign: 'top',
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio',
fieldLabel:'Biography'
}
}]
}]
});
tabs.render(Ext.get('frm1'));
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
//html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
//html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
region:'center',
id:'center-panel',
title:'Cedfdfsdnter',
margins:'35 5 5 0',
layout:'container',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
//html: Ext.example.shortBogusMarkup,
title:'Navigation',
contentEl: 'frm',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
//html: Ext.example.shortBogusMarkup,
contentEl: 'grid-example',
border:false,
autoScroll:true,
iconCls:'settings'
},{
title:'Settings',
//html: Ext.example.shortBogusMarkup,
contentEl: 'Div1',
border:false,
autoScroll:true,
iconCls:'settings'
},{
title:'Settings',
contentEl: 'Div2',
border:false,
autoScroll:false,
iconCls:'settings'
}]
}]
});
});
</script>
</head>
<body>
<div id="frm"><div id="frm1"></div></div>
<div id="grid-example"></div>
<div id="Div1">dsfsdafascxvxcvxcvxcvxcvxcvxvxdfasdfasd</div>
<div id="Div2"><iframe src="Map.aspx" style="width: 100%; height: 100%; background-color: #d0def0;border: 1px solid #8db2e3;"></iframe></div>
</body>
</html>
On a completely differnt note, when trying to load a complicated .Net page into a panel I get an error at the following in ext-all. All the scripts in Map.aspx are external and/or an embbeded resource to support mapping tools (zoomin,out,etc).
window.execScript(match[2])
var p = new Ext.Panel({
autoLoad: {url:'Map.aspx',scripts:true},
autoHeight: true,
renderTo: 'Div2'
});
If i load the same page via an Iframe (as coded above), it works like a charm.
Great job guys!