[CLOSED] GridPanel AutoWidth
Hello,
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.MyData.DataSource = new object[]
{
new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},
new object[] {"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"}
};
this.MyData.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Coolite Example - Simple Array Grid</title>
<script type="text/javascript">
var template = '{1}';
var change = function (value) {
return String.format(template, (value > 0) ? 'green' : 'red', value);
}
var pctChange = function (value) {
return String.format(template, (value > 0) ? 'green' : 'red', value + '%');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" />
<h1>Array Grid Example</h1>
<p>This example shows how to create a grid from Array data.</p>
<ext:Store ID="MyData" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="company" />
<ext:RecordField Name="price" Type="Float" />
<ext:RecordField Name="change" Type="Float" />
<ext:RecordField Name="pctChange" Type="Float" />
<ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<div style="width: 600px;">
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="MyData"
StripeRows="true"
Title="Array Grid"
AutoExpandColumn="Company"
AutoWidth="True"
AutoHeight="True">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnId="Company" Header="Company" Sortable="true" DataIndex="company" />
<ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
<Renderer Fn="change" />
</ext:Column>
<ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
<Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
</ext:Column>
</Columns>
</ColumnModel>
<SelModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelModel>
</ext:GridPanel>
</form>
</body>
</html>
Works in FF3.0 fails in IE6.0 ? Width runs on forever.
Thoughts? ;)
Cheers,
Timothy
RE: [CLOSED] GridPanel AutoWidth
Hmmm, just to let you know StyleSpec is also not working with it ...
Cheers,
Timothy
RE: [CLOSED] GridPanel AutoWidth
Regarding the GridPanel width issue in IE6, please add the following css class to your page.
Example
Code:
<style type="text/css">
.x-grid3-header-offset {width: auto;}
</style>
I would prefer if that css class was only added when rendering to IE6, for the other browsers the fix should not be required.
I'm not sure what you mean by "just to let you know StyleSpec is also not working with it". Can you post some code to demonstrate?
RE: [CLOSED] GridPanel AutoWidth
Thanks Geoffrey,
I was using StyleSpec on the GridPanel like the following:
Code:
<Ext:GridPanel runat="server" AutoHeight="True" StyleSpec="width: 100%;"> ...
;)
Cheers,
Timothy
RE: [CLOSED] GridPanel AutoWidth
Awesome Geoffrey, your recommendation worked in IE6:
Code:
* html .x-grid3-header-offset {
width: auto;
}
Oh, and on a side note I'm extremely pleased with your progress so far in the past couple revisions; 0.6 is beginning to look solid. Thanks for all the efforts to both of you.
Cheers,
Timothy
RE: [CLOSED] GridPanel AutoWidth
Hi Timothy,
I just added the IE6 "x-grid3-header-offset" fix as default functionality for the <ext:GridPanel> when rendering in IE6 only.
The "x-grid3-header-offset" css class will be added automatically if browser is IE6. The fix does not appear to be required if any other browser.
You do not have to add the css fix manually.
Thanks for the feedback! The last 'big thing' on my list is the <asp:UpdatePanel> enhancements. I'm not sure how long it will take to finish up and test, but I'm hoping to have something good committed to SVN by end of day tomorrow. Once the new <asp:UpdatePanel> code is committed we'll probably be releasing the v0.6 Preview publicly.
RE: [CLOSED] GridPanel AutoWidth
Awesome, I'll check out the changes and remove my hack.
Great news regarding the preview; send me a note when you have the UpdatePanel changes checked into SVN and I'll slam it into my current project to check some scenarios ;)
Cheers,
Timothy
RE: [CLOSED] GridPanel AutoWidth
Will do.
We also added some new <ext:GridPanel> samples today and I though you might be interested, see http://sandbox.ext.net/GridPanel/Grid3%20example/
RE: [CLOSED] GridPanel AutoWidth
Cool samples!
Cheers,
Timothy
RE: [CLOSED] GridPanel AutoWidth
Geoffrey,
Have you had any luck with the UpdatePanel enhancements? I would love to give them a test drive before the public preview to help iron it out ;)
Cheers,
Timothy