封装的Ext Grid

此封装的Grid是根据http://www.cnblogs.com/mogen_yin/archive/2008/12/04/1347246.html改造而来。

Grid源码：

  1/**//**
  2* @author sunfishlu
  3*/
  4var simplyGrid =
  5{
  6    data: null,
  7    url_data: null, //Grid数据源
  8    url_column: null, //列数据源
  9    _width: null, //宽度
 10    _height: null, //高度
 11    _pagesize: null, //每页显示数据数
 12    romanceContainer: null, //渲染Grid的容器
 13    hiddenColumnCount: null, //隐藏的列数，默认无隐藏列
 14    enableChecked: false, //是否有CheckBox，默认为无。
 15    grid: null,
 16    ToHrefField: null, //链接列
 17    ToHrefUrl: null, //链接地址
 18    ToHref: function(value) {
 19        return '<a href=' + simplyGrid.ToHrefUrl + '>' + value + '</a>';
 20    },
 21    simply: function() {
 22        //动态添加列
 23        var addColumn = function() {
 24            this.fields = '';
 25            this.columns = '';
 26            this.addColumns = function(name, caption) {
 27                if (this.fields.length > 0) {
 28                    this.fields += ',';
 29                }
 30                if (this.columns.length > 0) {
 31                    this.columns += ',';
 32                }
 33                this.fields += '{name:"' + name + '"}';
 34                if (simplyGrid.ToHrefField == name) {
 35                    this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100, menuDisabled:true,sortable:true,renderer:' + simplyGrid.ToHref + '}';
 36                }
 37                else {
 38                    this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100, menuDisabled:true,sortable:true}';
 39                }
 40            };
 41        };
 42        //从服务器端获取列，然后动态添加到ColumnModel中
 43        Ext.Ajax.request
 44        ({
 45            url: simplyGrid.url_column,
 46            success: function(response, option) {
 47                if (response.responseText == "") {
 48                    return;
 49                }
 50                simplyGrid.data = new addColumn();
 51                var res = Ext.util.JSON.decode(response.responseText);
 52                for (var i = 0; i < res.length; i++) {
 53                    for (var p in res[i]) {
 54                        simplyGrid.data.addColumns(p, p);
 55                    }
 56                }
 57                //动态生成GridPanel
 58                makeGrid();
 59            },
 60            failure: function() {
 61                Ext.Msg.alert("消息", "查询出错---->请打开数据库查看数据表名字是否正确");
 62            }
 63        });
 64        //动态生成GridPanel
 65        var makeGrid = function() {
 66            if (simplyGrid.enableChecked) {
 67                var sm = new Ext.grid.CheckboxSelectionModel({ singleSelect: false, moveEditorOnEnter: true, sortable: false });
 68                var arr = [sm];
 69                var sunfish = eval('([' + simplyGrid.data.columns + '])');
 70                for (var i = 0; i < sunfish.length; i++) {
 71                    arr.push(sunfish[i]);
 72                }
 73            }
 74            else {
 75                arr = eval('([' + simplyGrid.data.columns + '])');
 76            }
 77            var cm = new Ext.grid.ColumnModel(arr);
 78            //隐藏列
 79            if (simplyGrid.hiddenColumnCount != null) {
 80                for (var j = 0; j < simplyGrid.hiddenColumnCount; j++) {
 81                    cm.setHidden(j, true);
 82                }
 83            }
 84            cm.defaultSortable = true;
 85            var fields = eval('([' + simplyGrid.data.fields + '])');
 86            var newStore = new Ext.data.Store
 87            ({
 88                proxy: new Ext.data.HttpProxy({ url: simplyGrid.url_data }),
 89                reader: new Ext.data.JsonReader({ totalProperty: "totalPorperty", root: "root", fields: fields })
 90            });
 91            newStore.load({ params: { start: 0, limit: simplyGrid._pagesize} });
 92            var pagingBar = new Ext.PagingToolbar
 93            ({
 94                displayInfo: true,
 95                emptyMsg: "没有数据显示",
 96                displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据",
 97                store: newStore,
 98                pageSize: simplyGrid._pagesize
 99            });
100            
101            var gridPanel = new Ext.grid.GridPanel
102            ({
103                sm: sm,
104                cm: cm,
105                id: "grid_panel",
106                renderTo: simplyGrid.romanceContainer,
107                store: newStore,
108                frame: true,
109                border: true,
110                layout: "fit",
111                pageSize: simplyGrid._pagesize,
112                width: simplyGrid._width,
113                height: simplyGrid._height,
114                viewConfig: { forceFit: true },
115                bbar: pagingBar
116            });
117            simplyGrid.grid = gridPanel;
118        };
119    }
120}

在页面中简单调用如下：

 1        function init() {
 2            simplyGrid.url_data = "jsonGridDynamic.aspx?param=data"; //Grid数据源
 3            simplyGrid.url_column = "jsonGridDynamic.aspx?param=column"; //列数据源
 4            simplyGrid._width = Ext.get("grid_div").getComputedWidth(); //宽度
 5            simplyGrid._height = 400; //高度
 6            simplyGrid.romanceContainer = 'grid_div'; //渲染Grid的容器
 7            simplyGrid._pagesize = 16; //每页显示数据数
 8            simplyGrid.hiddenColumnCount = 0; //隐藏的列数，默认无隐藏列
 9            simplyGrid.enableChecked = true; //是否有CheckBox，默认为无。
10            simplyGrid.ToHrefField = "TypeCName";
11            simplyGrid.ToHrefUrl = "about:blank";
12            simplyGrid.simply();
13        }
14        Ext.onReady(init);

效果图：