日期:2014-05-16  浏览次数:20282 次

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() {