ExtJs4.0 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:[]}";
        }
    }
}