PDA

View Full Version : [2.0a1] Accordian/Grid



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!

Brendan Carroll
3 Oct 2007, 6:11 AM
I've played with this more and noticed some issues with my posted code. I've fixed those, I think, but am still having display issues with a grid in a viewport with an accordion layout. Is anyone having similar issues with grids/accordion rendering?

mystix
3 Oct 2007, 7:59 AM
please post more details as per 13985.

jack.slocum
4 Oct 2007, 1:22 AM
Brandon, it's hard to gauge exactly what's going on. If you can isolate the issue into something we can look at, that would make it a little easier. Thanks!

Brendan Carroll
6 Oct 2007, 11:20 AM
1962

Here is the code and page. Sorry its so much but it will allow you to recreate the error. You can comment out the iframe. BTW, the iframe is a whole different issue for me.

.Net 2.0 C#
WinXP
Alpha 2.0
IE 6.0.29


// JScript File

//debugger;

//required refernce image
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';

var Viewer = function(){

return {
//
// //
// //GENERAL VIEWER METHODS
// //
//
//loading mask
unmask : function() {
var el = Ext.get('content');
var mask = Ext.get('loading-mask');
var msg = Ext.get('loading-msg');
if(mask && msg) {
mask.shift({
xy:msg.getXY(),
width:msg.getWidth(),
height:msg.getHeight(),
remove: true,
duration: 2.3,
opacity: 0.3,
easing: 'bounceOut',
callback: function(){Ext.fly(msg).remove(); el.setVisible(true);}
});}
},

//initial loading function called when documnet is ready
init : function(){

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

Ext.QuickTips.init();

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});

ds.loadData(myData);

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({
renderTo:'resGrid',
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
height:600,
width:650,
title:'Query Results'
});

grid.render();

grid.getSelectionModel().selectFirstRow();

var tabs = new Ext.FormPanel({
labelAlign: 'top',
bodyStyle:'padding:15px;padding-bottom:30px',
width: 600,
tbar:[{
text:'New Query',
tooltip:'Create New Query',
iconCls:'owrench'
}, '-', {
text:'Validate',
tooltip:'Validate Current Query',
iconCls:'validate'
},'-',{
text:'Add To Query',
tooltip:'Add Statement to Query',
iconCls:'add'
},'-',{
text:'Load',
tooltip:'Load Results in Data View',
iconCls:'resgrid'
},'-',{
text:'Clear Form',
tooltip:'Clear Query Form',
iconCls:'refresh'
}],
items: [{
xtype:'fieldset',
title: 'Search Tables or Features',
collapsible: true,
autoHeight:true,
layout:'column',
items:[{
columnWidth:.5,
layout:'form',
bodyBorder:false,
labelAlign:'left',
items: [{
bodyBorder:false,
labelSeparator:'',
html:'<h3><font color="blue">Tables:</font></h3>'
},{
xtype:'radio',
labelSeparator:'',
fieldLabel: 'Site Inspections',
name:'src'
},{
xtype:'radio',
labelSeparator:'',
fieldLabel:'BMP Inspections',
name:'src'
},{
xtype:'radio',
labelSeparator:'',
fieldLabel:'Contracts',
name:'src'
}]
},{
columnWidth:.5,
layout:'form',
bodyBorder:false,
items: [{
bodyBorder:false,
html:'<h3><font color="blue">Features:</font></h3>'
},{
xtype:'radio',
labelSeparator:'',
fieldLabel:'Structures',
name:'src'
},{
xtype:'radio',
labelSeparator:'',
fieldLabel:'SWM Facilities',
name:'src'
}]
}]
},{
xtype:'fieldset',
title: 'Tables & Features',
collapsible: true,
autoHeight:true,
defaultType: 'textarea',
items :[{
fieldLabel: 'Current Where Clause',
name: 'home',
readOnly:true,
width:535,
height:50
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:255,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Search Filters',
layout:'form',
defaults: {width: 230},
defaultType:'combo',
iconCls:'pfnd',
items: [{
fieldLabel: 'County',
name: 'cnty'
},{
fieldLabel: 'SHA District',
name: 'dist'
},{
fieldLabel: 'Watershed',
name: 'wshed'
}, {
fieldLabel: 'Maintenance Shop',
name: 'mshop'
}]
},{
title:'Query Bulider',
layout:'form',
defaults: {width: 230},
defaultType:'combo',
iconCls:'mag',
items: [{
fieldLabel: 'And/Or',
name: 'andor'
},{
fieldLabel: 'Field',
name: 'fld'
},{
fieldLabel: 'Operator',
name: 'fop'
},{
fieldLabel: 'Value',
name: 'fval'
}]
},{
title:'Value Lookup',
layout:'form',
defaults: {width: 230},
defaultType: 'combo',
iconCls:'dbase'
}]
}]
});

var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'Project Files',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
iconCls: 'bkopen',
layoutConfig:{
animate:true
},
items: [{
id:'docs',
title:'Documents',
autoScroll:true,
border:false,
iconCls:'nav'
},{
id:'imgs',
title:'Images',
border:false,
autoScroll:true,
iconCls:'cam'
},{
title:'draw',
title:'Drawings',
border:false,
autoScroll:true,
iconCls:'ov'
}]
},{
region:'center',
id:'centerpnl',
title:'Maryland SHA BMP Workbench',
margins:'35 5 5 0',
layout:'accordion',
iconCls:'bkgo',
layoutConfig:{
animate:true
},
items: [{
title:'Mapping Tools',
contentEl: 'iMap',
border:false,
autoScroll:true,
iconCls:'map'
},{
title:'Query Tools',
autoScroll:true,
border:false,
iconCls:'appfrm',
items:[tabs]
},{
title:'Results View',
border:false,
autoScroll:true,
iconCls:'resgrid',
items:[grid]
},{
title:'Report View',
border:false,
autoScroll:true,
iconCls:'info'
},{
title:'Historical View',
border:false,
autoScroll:true,
iconCls:'fdet'
}]
}]
});

Ext.get('iMap');

//pull the mask
this.unmask.defer(3000);
}
}
}();
Ext.onReady(Viewer.init, Viewer);

And the .net page



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Maryland State Highway BMP Tools</title>

<link href="ext2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="ext2/resources/css/bmp.css" rel="stylesheet" type="text/css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="ext2/scripts/ext-base.js"></script>
<script type="text/javascript" src="ext2/scripts/ext-all.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext2/scripts/kci.mdsha.bmp.viewer.js"></script>
</head>
<body>
<form id="form1" runat="server" autocomplete="off">
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="true">
<Services>
<asp:ServiceReference Path="~/Fudge.asmx" />
</Services>
</asp:ScriptManager>
</form>

<div id="loading-mask" class="ext-el-mask"></div>
<div id="loading-msg" class="ext-el-mask-msg x-mask-loading" style="top: 50%; left: 50%;">
<div style="top: 50%; left: 50%;">Loading SHA BMP Viewer...</div>
</div>
<div id="content" style="visibility: hidden;">
<div id="resGrid"></div>
<iframe id="iMap" src="Map.aspx" style="width: 100%; height: 100%;"></iframe>
</div>

</body>
</html>

jack.slocum
7 Oct 2007, 11:47 PM
Hi Brandon,

After looking at this code for a bit, there are a few problems:

1. You are trying to render the grid twice - this will cause 1 error (renderTo: config and manual call to render())

2. Really you don't even want to render the grid once. Since you are adding it into a layout the layout will manage it for you.

3. You are adding the grid as an item in a panel (the same with the components around it). If you want them to fit that fit, you will need to set layout:'fit' on the panel. However, a GridPanel is a panel. There is no point wrapping it in a Panel when you can just set the properties directly on it and add it to the accordion.

4. You may wish to look for a snippet I posted "IFrameComponent" in the forums to help with adding the iframe to the accordion.

Helpfully this stuff helps,

Jack