Dynamic grid model + data

  1. #1

    Dynamic grid model + data

    Thread moved to premium:
    http://forums.ext.net/showthread.php...rid-model-data

    Hi, I'm trying to fill an existing grid created in markup, but always got a JS error:

    TypeError: me.model is undefined

    However, the model is added to the store:

    MyStore.Model.Add(BuildModel());
    What's wrong?

    Thanks!

    <%@ Page Language="C#" %>
    
    <script runat="server">
    
        protected void Button1_Click(object sender, DirectEventArgs e)
        {
            FillGridPanel();
    
            this.Button1.Disabled = true;
        }
    
        private void FillGridPanel()
        {
            MyStore.Model.Add(BuildModel());
            MyStore.DataSource = Data;
    
            ColumnBase[] cols =
            {
                new Column
                {
                    Text = "Company",
                    DataIndex = "company",
                    Flex = 1
                },
                new Column
                {
                    Text = "Price",
                    DataIndex = "price",
                    Renderer = {Format = RendererFormat.UsMoney}
                },
                new Column
                {
                    Text = "Change",
                    DataIndex = "change",
                    Renderer = {Fn = "change"}
                },
                new Column
                {
                    Text = "Change",
                    DataIndex = "pctChange",
                    Renderer = {Fn = "pctChange"}
                },
                new DateColumn
                {
                    Text = "Last Updated",
                    DataIndex = "lastChange"
                }
            };
    
    
            MyGrid.ColumnModel.Columns.Add(cols);
            MyGrid.Store.Add(MyStore);
            MyStore.DataBind();
        }
    
        private Model BuildModel()
        {
            return new Model
            {
                Fields =
                {
                    new ModelField("company"),
                    new ModelField("price", ModelFieldType.Float),
                    new ModelField("change", ModelFieldType.Float),
                    new ModelField("pctChange", ModelFieldType.Float),
                    new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                }
            };
        }
    
        private object[] Data
        {
            get
            {
                return 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"},
                    new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},
                    new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},
                    new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},
                    new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},
                    new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"},
                    new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"},
                    new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"},
                    new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"},
                    new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"},
                    new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"},
                    new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"},
                    new object[] {"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"},
                    new object[] {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"},
                    new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"},
                    new object[] {"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"},
                    new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"},
                    new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"},
                    new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"},
                    new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"},
                    new object[] {"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"},
                    new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"},
                    new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"},
                    new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
                };
            }
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
        <head runat="server">
            <title>Create GridPanel and Store during DirectEvent - Ext.NET Examples</title>
    
            <script>
                var template = '<span style="color:{0};">{1}</span>';
    
                var change = function(value) {
                    return Ext.String.format(template, (value > 0) ? "green" : "red", value);
                };
    
                var pctChange = function(value) {
                    return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
                };
            </script>
        </head>
        <body>
            <form runat="server">
                <ext:ResourceManager runat="server" />
        
                <ext:Store ID="MyStore" runat="server" PageSize="20"
                           AutoLoad="false"
                    >
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                    
                    <Listeners>
                        <Load Handler="#{MyGrid}.setLoading(false);"></Load>
                    </Listeners>
                </ext:Store>
    
        
                <ext:Window 
                    ID="Window1" 
                    runat="server"
                    Title="Dynamic GridPanel"
                    Layout="FitLayout"
                    Height="350"
                    Width="600">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button
                                    ID="Button1"
                                    runat="server" 
                                    Text="Fill GridPanel" 
                                    Icon="Add">
                                    <DirectEvents>
                                        <Click OnEvent="Button1_Click">
                                            <EventMask ShowMask="true" 
                                                       Target="CustomTarget" 
                                                       CustomTarget="Window1" 
                                                />
                                        </Click>
                                    </DirectEvents>    
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:GridPanel runat="server" ID="MyGrid" StoreID="MyStore">
                            
                        </ext:GridPanel>
    
                    </Items>
                </ext:Window>
            </form>
        </body>
    </html>
    Last edited by exe; Feb 17, 2015 at 7:59 AM. Reason: thread moved to premium forum
  2. #2
  3. #3
    Thanks for your response, but my example is based on that example.

    My code is setting model this way:

    MyStore.Model.Add(BuildModel());
    the ext.net example is setting the model in Store constructor:

    Store store = new Store
            {
                Model = 
                { 
                    new Model 
                    {
                        Fields = 
                        {
                            new ModelField("company"),
                            new ModelField("price", ModelFieldType.Float),
                            new ModelField("change", ModelFieldType.Float),
                            new ModelField("pctChange", ModelFieldType.Float),
                            new ModelField("lastChange", ModelFieldType.Date, "M/d hh:mmtt")
                        }
                    }
                }
            };
    My code doesn't work...
  4. #4
    Guys, anyone?

    Thanks!

Similar Threads

  1. [CLOSED] Saving dynamic store / model data
    By jchau in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 15, 2013, 2:14 PM
  2. [CLOSED] Dynamic model field and bind data
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 19, 2013, 5:56 PM
  3. [CLOSED] Grid Panel with Complex Data model and a ComboBox Editor
    By alscg in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 06, 2013, 11:03 PM
  4. Replies: 0
    Last Post: Jan 08, 2013, 5:18 AM
  5. Replies: 1
    Last Post: Mar 08, 2012, 2:52 PM

Tags for this Thread

Posting Permissions