ExtJs GridPanel 生成列
最近在用ExtJS做项目，此部分代码为自动生成gridpanel列
1: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
2:
3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4:
5: <html xmlns="http://www.w3.org/1999/xhtml" >
6: <head id="Head1" runat="server">
7: <title>CICompare</title>
8: <script type="text/javascript">
9:
10: Ext.Ajax.request({
11: url: '/CI/BuildCM', //asp.net mvc action
12: method: 'GET',
13: success: function (responseObject) {
14: var responseArray = Ext.util.JSON.decode(responseObject.responseText);
15: //var fieldNames = responseArray.fieldsNames;
16: //alert(Ext.util.JSON.encode(responseArray.columModle));
17: var CICompare_store = new Ext.data.JsonStore({
18: proxy: new Ext.data.HttpProxy({
19: url: '/CI/LogicDevice' // get json asp.net mvc action
20: }),
21: autoDestroy: true,
22: storeId: 'myStore',
23: root: 'images',
24: idProperty: 'name',
25: fields: responseArray.fieldsNames
26: });
27:
28: var mediaGrid_cm = new Ext.grid.ColumnModel(responseArray.columModle);
29: var CICompare_grid = new Ext.grid.GridPanel({
30: id: 'CICompare_grid',
31: renderTo: 'CICompare_div_grid',
32: autoHeight: true,
33: autoScroll: true,
34: fitContainer: true,
35: store: CICompare_store,
36: stripeRows: true,
37: viewConfig: {
38: forceFit: true
39: },
40: cm: mediaGrid_cm
41: });
42: CICompare_store.load();
43: }
44: })
45:
46:
47: </script>
48: </head>
49: <body>
50: <div id="CICompare_div_grid"> </div>
51: </body>
52: </html>
53:
Controller Code
1: //[ExtJsGridJson]
2: public ActionResult LogicDevice()
3: {
4: //DAO.CIDAO dao = new CIDAO();
5: //DataSet ds = dao.PagerLogicDevice(start, limit);
6: //this.ViewData["PagerData"] = ds;
7:
8: return this.Content(@"{
9: 'images':[
10: {'name':'gangster_zack.jpg','size':2115,'lastmod':1207259034000,'url':'images\/thumbs\/gangster_zack.jpg'},
11: {'name':'kids_hug.jpg','size':2477,'lastmod':1207259034000,'url':'images\/thumbs\/kids_hug.jpg'},
12: {'name':'sara_smile.jpg','size':2410,'lastmod':1207259034000,'url':'images\/thumbs\/sara_smile.jpg'},
13: {'name':'sara_pink.jpg','size':2154,'lastmod':1207259034000,'url':'images\/thumbs\/sara_pink.jpg'},
14: {'name':'zack_dress.jpg','size':2645,'lastmod':1207259034000,'url':'images\/thumbs\/zack_dress.jpg'},
15: {'name':'zacks_grill.jpg','size':2825,'lastmod':1207259034000,'url':'images\/thumbs\/zacks_grill.jpg'},
16: {'name':'kids_hug2.jpg','size':2476,'lastmod':1207259034000,'url':'images\/thumbs\/kids_hug2.jpg'},
17: {'name':'zack.jpg','size':2901,'lastmod':1207259034000,'url':'images\/thumbs\/zack.jpg'},
18: {'name':'sara_pumpkin.jpg','size':2588,'lastmod':1207259034000,'url':'images\/thumbs\/sara_pumpkin.jpg'},
19: {'name':'zack_hat.jpg','size':2323,'lastmod':1207259034000,'url':'images\/thumbs\/zack_hat.jpg'},
20: {'name':'up_to_something.jpg','size':2120,'lastmod':1207259034000,'url':'images\/thumbs\/up_to_something.jpg'},
21: {'name':'zack_sink.jpg','size':2303,'lastmod':1207259034000,'url':'images\/thumbs\/zack_sink.jpg'},
22: {'name':'dance_fever.jpg','size':2067,'lastmod':1207259034000,'url':'images\/thumbs\/dance_fever.jpg'}
23: ]
24: }");
25: //return new EmptyResult();
26: }
27:
28: public ActionResult BuildCM()
29: {
32: StringBuilder j = new StringBuilder();
33:
34: j.Append("{");
35: j.Append("'fieldsNames':['name', 'url', {'name':'size', 'type': 'float'}, {'name':'lastmod', 'type':'date'}]");
36: j.Append(",");
37: j.Append("'columModle':[{'header':'','dataIndex':'name','align':'center'},{'header':'有D啊?爱?偶?','dataIndex':'url','align':'center'},{'header':'lastmod','dataIndex':'lastmod','align':'center'}]");
38: j.Append("}");
39: return this.Content(j.ToString());
40: }
41:
