Feb 03, 2015, 9:07 AM
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:
Thanks!
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