韦小宝是我的老乡

1、本系列文章为原创，如有转载请注明作者（cmsoft）和出处（博客园）；
2、本系列文章不在讲述asp.net mvc与ExtJs相关的基础知识，如要了解基本知识的请参考我以前的文章。
先看效果图：

看上去很酷吧，呵呵：）
以上功能主要有以下几个文件组成：
显示、删除功能实现
1.ExtJs的Grid显示（CMS.js）

CMS.js
  1/**//*
  2 * Ext JS Library 2.0
  3 * Copyright(c) 2006-2007, Ext JS, LLC.
  4 * licensing@extjs.com
  5 * 
  6 * http://extjs.com/license
  7 */
  8Ext.util.CSS.swapStyleSheet("theme","http://localhost/PoloSoft/Resources/css/xtheme-gray.css");
  9Ext.onReady(function(){
 10       Ext.QuickTips.init();
 11       var myUrl='http://localhost/PoloSoft/';
 12      // create the Data Store
 13        var ds = new Ext.data.GroupingStore({
 14        // load using script tags for cross domain, if the data in on the same domain as
 15        // this page, an HttpProxy would be better
 16        proxy: new Ext.data.HttpProxy({
 17            url: myUrl+'Admin/CmsDataSource'
 18        }),
 19
 20        // create reader that reads the project records
 21        reader: new Ext.data.JsonReader(
 22        {
 23            totalProperty: "results",     // The property which contains the total dataset size (optional)
 24            root: "rows",                         // The property which contains an Array of row objects
 25            id: "id"                                    // The property within each row object that provides an ID for the record (optional)
 26        },[
 27            {name:'ID',                              type:'int'},
 28            {name:'CATALOG_NAME',  type:'string'},
 29            {name:'TITLE',                        type:'string'},
 30            {name:'AUTHOR',                 type:'string'},
 31            {name:'CREATE_TIME',         type:'string'},
 32            {name:'NEWS_FROM',         type:'string'}
 33         ]),
 34        groupField:'CATALOG_NAME',
 35
 36        // turn on remote sorting
 37        remoteSort: false
 38    });
 39    ds.setDefaultSort('CREATE_TIME', 'desc');
 40
 41    // formate ms json date formate
 42    function renderDate(value, p, record){
 43       var jsondate = record.data.CREATE_TIME;
 44//       var s = "";           // 声明变量
 45       jsondate = eval("new " + jsondate.substr(1,jsondate.length-2));   // 创建 Date 对象
 46//       s += jsondate.getYear()+ "-";                  // 获取年份
 47//       s += (jsondate.getMonth() + 1) + "-";   // 获取月份
 48//       s += jsondate.getDate() ;                         // 获取日
 49//       return(s);    
 50        return jsondate.toLocaleDateString();
 51    }
 52
 53    // the column model has information about grid columns
 54    // dataIndex maps the column to the specific data field in
 55    // the data store
 56    var nm = new Ext.grid.RowNumberer();
 57    var sm = new Ext.grid.CheckboxSelectionModel();  // add checkbox column
 58    var cm = new Ext.grid.ColumnModel([nm,sm,
 59        {id:'ID',header:"编号",dataIndex: 'ID', width: 40, align:'center'},
 60        {header:"所属板块",dataIndex: 'CATALOG_NAME',  width: 70,align:'center'  },
 61        {header:"标题",dataIndex: 'TITLE',     width:200, align:'left'},
 62        {header:"作者",dataIndex: 'AUTHOR',  width:50, align:'center'},
 63        {header:"来源",  dataIndex: 'NEWS_FROM',width: 50, align:'center'},
 64        {header:"发布时间",  dataIndex: 'CREATE_TIME', renderer: renderDate,width: 50, align:'center'}
 65    ]);
 66
 67    //hide column
 68   cm.setHidden(2, !cm.isHidden(2));   //隐藏编号列
 69
 70  // by default columns are sortable
 71  // cm.defaultSortable = true;
 72   var gdCMS = new Ext.grid.GridPanel({
 73        el:'cms-grid',
 74        title:'信息数据一览表',
 75        iconCls: 'icon-grid',
 76        layout:'fit',
 77        bodyStyle:'width:100%',
 78        height:605,
 79        monitorWindowResize:true,
 80        monitorResize:true,
 81        autoScroll:true,
 82        store: ds,
 83        cm: cm,
 84        sm: sm,
 85        trackMouseOver:true,
 86        loadMask: {msg:'正在加载数据，请稍侯……'},
 87        viewConfig: {
 88            enableRowBody:true,
 89            getRowClass : function(record, rowIndex, p, ds){
 90                return 'x-grid3-row-collapsed';
 91            }
 92        },
 93        view: new Ext.grid.GroupingView({
 94            forceFit:true,
 95            groupTextTpl: '{text} ({[values.rs.length]}条记录)'
 96        }),
 97         bbar: new Ext.PagingToolbar({
 98            pageSize: 25,
 99            store: ds,
100            displayInfo: true,
101            displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
102            emptyMsg: "无显示数据"
103        }),
104        tbar:[
105        {
106            id:'btnAdd',
107            text:'新增',
108            tooltip:'新增',
109            iconCls:'add',
110            handler: function(){window.location.href=myUrl+'Admin/Add';}
111        },
112         {
113            id:'btnAdd',
114            text:'编辑',
115            tooltip:'编辑',
116            iconCls:'edit',
117            handler: doEdit
118        },
119        {
120            id:'btnDel',
121            text:'删除',
122            tooltip:'批量删除',
123            iconCls:'remove',
124            handler:doDel
125        },
126            new Ext.app.SearchField({
127                store: ds,
128                width:320,
129                emptyText:'搜索信息'
130            })
131        ]
132    });
133    
134    
135    gdCMS.render();
136    
137    // trigger the data store load
138    ds.load({params:{start:0, limit:25}});
139    
140    
141    function doEdit()
142    {
143        var row=gdCMS.getSelections();
144        if(row.length==1)
145        {
146          var id = row[0].get("ID");
147          window.location.href=myUrl+'Admin/Edit?id='+id;  
148        }                   
149        else
150        {
151          Ext.MessageBox.alert("提示","请选1条记录进行编辑！");
152        }
153    }
154       
155    function doDel()
156    {
157        Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);
158    }  
159    function showResult(btn){
160         if(btn=='yes'){
161          var row=gdCMS.getSelections();
162          var jsonData="";
163          for(var i=0,len=row.length;i<len;i++){
164            var id = row[i].get("ID");
165            if(i==0)
166              jsonData =id;                                 //这样处理是为了删除的Lambda语句方便
167            else
168              jsonData = jsonData + ","+ id;   //这样处理是为了删除的Lambda语句方便
169          }
170          jsonData=","+jsonData+",";           //这样处理是为了删除的Lambda语句方便
171          var conn = new Ext.data.Connection();
172          conn.request({
173            url:myUrl+"Admin/Delete",
174            params:{idList:jsonData},
175            method: 'post',
176            scope: this,
177            callback:function(options,success, response){ 
178           if(success){   
179              Ext.MessageBox.alert("提示","所选记录成功删除！");
180              ds.load(