Extjs4 GridPanel 实例

var store;
Ext.app.ContentItemJKGrid = Ext.extend(Ext.grid.GridPanel,
{
    title: '内容项接口列表',
    region: 'north',
    id: 'am-contentitemjkgrid',
    height: 150,
    ctiId: 0,
    ctiName: '',
    wsId: 0,
    viewConfig:
	{
	    id: 'ctigv',
	    trackOver: true,
	    stripeRows: true
	},
    initComponent: function () {
        var me = this;
        var ctism = new Ext.selection.CheckboxModel({
            id: "ctiJKwsId",
            dataIndex: 'CtiId',
            mode: 'SINGLE',   //设置Checkbom只能选中一个
            listeners: {
                'select': function (sm, rowIndex, record) {
                    ctijkClick();
                }
            }
        });
        this.columns =
	    [
		    {
		        id: 'ctiJKgridName',
		        header: '内容项名称',
		        width: 300,
		        sortable: true,
		        dataIndex: 'CtItemName'
		    },
		    {
		        id: 'ctiJKgridwsName',
		        width: 400,
		        header: 'Web Sevice名称',
		        dataIndex: 'WsName'
		    },
		    {
		        id: 'ctiJKgridExplain',
		        width: 400,
		        header: '数据库表名',
		        dataIndex: 'TableName'
		    }
	    ];
        this.selModel = ctism;
        Ext.define('Ext.app.ContentItemData',
		{
		    extend: 'Ext.data.Model',
		    fields:
			[
		    //第一个字段需要指定mapping，其他字段，可以省略掉。 
				{
				name: 'CtItemName',
				mapping: 'CtItemName',
				type: 'string'
},
				{
				    name: 'WsName',
				    type: 'string'
				},
				{
				    name: 'TableName',
				    type: 'string'
				},
				{
				    name: 'CtiId',
				    type: 'int'
				},
				{
				    name: 'Id',
				    type: 'int'
				},
				{
				    name: 'WsId',
				    type: 'string'
				}
			]
		});
        store = Ext.create('Ext.data.Store',
		{
		    model: 'Ext.app.ContentItemData',
		    pageSize: 20,
		    proxy:
			{
			    type: 'ajax',
			    url: 'Data/CtItemInterface/CtItemInterfaceInfo.aspx?param=select',
			    reader:
				{
				    type: 'json',
				    root: 'items',
				    totalProperty: 'total'
				}
			},
		    listeners: {
		        load: function () {
		            var addClick = Ext.getCmp("ctiJKAdd");
		            var EditClick = Ext.getCmp("ctiJKEdit");
		            var deleteClick = Ext.getCmp("ctiJKdelete");
		            if (addClick) {
		                if (me.ctiId == 0) addClick.disabled = true;
		                else addClick.disabled = false;
		            }
		            if (EditClick) {
		                if (me.ctiId == 0) EditClick.disabled = true;
		                else EditClick.disabled = false;
		            }
		            if (deleteClick) {
		                if (me.ctiId == 0) deleteClick.disabled = true;
		                else deleteClick.disabled = false;
		            }
		            if (me.store.data.length > 0) {
		                me.getSelectionModel().select(0);             // checkbom默认选择一个
		            }
		            ctijkClick();
		        }
		    },
		    autoLoad: true
		});
        Ext.apply(this,
		{
		    store: store,
		    dockedItems:
			[{
			    dock: 'top',
			    xtype: 'toolbar',
			    items:
                [
                    {
                        width: 80,
                        xtype: 'button',
                        id: "ctiJKAdd",
                        text: '添加',
                        store: store,
                        handler: ctijkAdd
                    },
				    {
				        width: 50,
				        xtype: 'button',
				        id: "ctiJKEdit",
				        text: '编辑',
				        store: store,
				        handler: ctijkEdit
				    },
                    {
                        width: 50,
                        xtype: 'button',
                        id: "ctiJKdelete",
                        text: '删除',
                        store: store,
                        handler: ctijkDelete
                    }
                ]
			}]
		});

        ///定义内容项接口删除事件
        function ctijkDelete() {
            var row = me.getSelectionModel().getSelection();
            if (row.length == 0) {
                Ext.Msg.alert("提示", "请选择一行");
            } else {
                Ext.Msg.confirm("提示", "确定删除这" + row.length + "条信息吗?",
				    function (btn) {
				        if (btn == "yes") {
				            Ext.Ajax.request({
				                url: "data/CtItemInterface/CtItemInterfaceManager.aspx?param=DeleteCtItemJk",
				                method: "POST",
				                params: { id: row[0].get("Id") }, //发送的参数
				                success: function (response, option) {
				                    response = Ext.JSON.decode(response.responseText);
				                    if (response.success == true) {
				                        if (response.flag == true) {
				                            Ext.MessageBox.alert("提示", "删除接口成功！");

				                            //刷新列表
				                            me.store.load();
				                        }
				                        else { Ext.MessageBox.alert("错误信息", "删除接口失败！"); }
				                    }
				                    else { Ext.MessageBox.alert("错误信息", response.msg); }
				                },
				                failure: function () { Ext.Msg.alert("提示", "删除失败<br>没有捕获到异常"); }
				            });
				        }
				    })
            }
        }

        ///复选框选择事件
        function ctijkClick() {
            //根据选中的行显示相应内容栏数据
            var ctcgridview = Ext.getCmp('am-contentcolumngrid');
            if (me.store.data.length > 0) {
                ctcgridview.wsName = me.getSelectionModel().getSelection()[0].get("WsName");  //可以给另一个grid属性赋值
                ctcgridview.wsId = me.getSelectionModel().getSelection()[0].get("WsId");
                ctcgridview.ctiName = me.getSelectionModel().getSelection()[0].get("CtItemName");
            } else { ctcgridview.wsId = 0 }
            // alert(ctcgridview.wsId);
            ctcgridview.ctiId = me.ctiId;
            ctcgridview.store.load({
                url: 'Data/ContentColumn/ContentColumnInfo.aspx?param=select',
                params: { msg: me.ctiId }
            });
        }

        //定义内容项接口添加事件
        function ctijkAdd() {
            var ctiWin = Ext.create('Ext.app.ContentItemJKAddForm', { ctiId: me.ctiId, ctiName: me.ctiName });
            ctiWin.show();
        }

        //定义内容项接口编辑事件
        function ctijkEdit() {
            var row = me.getSelectionModel().getSelection();
            if (row.length == 0) {
                Ext.Msg.alert("提示", "请选择一行");
            } else if (row.length > 1) {
                Ext.Msg.alert("提示", "只能选择一行");
            } else if (row.length == 1) {
                var ctiInId = row[0].get('Id');
                if (ctiInId != 0) {
                    var editwin = Ext.create('Ext.app.ContentItemJKEditForm', { Id: ctiInId });
                    editwin.show();
                    Ext.getCmp("am-contentitemjkeditform").getForm().load(
					    {
					        url: "data/CtItemInterface/CtItemInterfaceInfo.aspx?param=selectById",
					        params: { Id: ctiInId },
					        waitTitle: "请等待",
					        waitMsg: "正在加载数据...",
					        success: function (form, action) {

					        },
					        failure: function (form, action) {
					            Ext.Msg.alert("提示", "数据加载失败！");
					        }
					    });
                }
            }
        };
        Ext.app.ContentItemJKGrid.superclass.initComponent.call(this);
    }
});

 using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CtManager.BLL;
using CtManager.Model;
using Newtonsoft.Json;

public partial class Data_CtInterface_CtInterfaceInfo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["param"] == null) 
        {
            Response.Write("");
            return;
        }
        string parameter = Request["param"];
        if (parameter == "select") Response.Write(doCtItemInterface());
        else Response.Write("");
    }


    /// 根据内容项Id内容项接口集合
    private string doCtItemInterface()
    {
        try
        {
            IList<CtItemInterface> ctItemInterface = CtItemInterfaceManager.GetAllCtItemInterfaces(Request["ctItemId"]);
            if (ctItemInterface == null) return "{total:0,items:[]}";
            string json = JavaScriptConvert.SerializeObject(ctItemInterface);
            return "{total:3,items:" + JavaScriptConvert.SerializeObject(ctItemInterface) + "}";
        }
        catch (Exception)
        {
            
            return "{total:0,items:[]}";
        }
    }
}