[CLOSED] GridPanel AutoWidth

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GridPanel AutoWidth

    Hello,

    <%@ 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&amp;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
  2. #2

    RE: [CLOSED] GridPanel AutoWidth

    Hmmm, just to let you know StyleSpec is also not working with it ...

    Cheers,
    Timothy
  3. #3

    RE: [CLOSED] GridPanel AutoWidth

    Regarding the GridPanel width issue in IE6, please add the following css class to your page.

    Example

    <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?

    Geoffrey McGill
    Founder
  4. #4

    RE: [CLOSED] GridPanel AutoWidth

    Thanks Geoffrey,

    I was using StyleSpec on the GridPanel like the following:

    <Ext:GridPanel runat="server" AutoHeight="True" StyleSpec="width: 100%;"> ...
    ;)

    Cheers,
    Timothy
  5. #5

    RE: [CLOSED] GridPanel AutoWidth

    Awesome Geoffrey, your recommendation worked in IE6:

    * 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
  6. #6

    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.
    Geoffrey McGill
    Founder
  7. #7

    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
  8. #8

    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/

    Geoffrey McGill
    Founder
  9. #9

    RE: [CLOSED] GridPanel AutoWidth

    Cool samples!

    Cheers,
    Timothy
  10. #10

    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
Page 1 of 2 12 LastLast

Similar Threads

  1. AutoWidth in TableLayout
    By lagrange in forum 1.x Help
    Replies: 0
    Last Post: Sep 27, 2011, 2:47 AM
  2. Control AutoWidth
    By dtamils in forum 1.x Help
    Replies: 1
    Last Post: Aug 08, 2011, 7:29 AM
  3. [CLOSED] Window with autowidth
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 13, 2011, 11:47 PM
  4. [1.0] ComboBox AutoWidth bug?
    By tnwheeler in forum 1.x Help
    Replies: 0
    Last Post: Jun 04, 2010, 4:19 PM
  5. GridPanel?AutoWidth??
    By zaneabc in forum 1.x Help
    Replies: 0
    Last Post: Jul 03, 2009, 10:28 AM

Posting Permissions