list.js

Extjs2增删改查

/**
 * the entrance of the main function
 * @param store
 */
function onLoad(params)
{
    var pagesize=10;
    var conditions=new Array();                   //use to save the query condtion
    if(params["pagesize"])
    {
        pagesize=params["pagesize"];
    }
    var title=params["title"];
    var div=params["div"];
    var listOperater=params["listOperater"];
    var gridParams=params["gridParams"];
    var queryCondition=params["queryCondition"];
    var gridconfig=new GridConfig(gridParams);

    Ext.onReady(function() {
        var MyRecord = Ext.data.Record.create(gridconfig.getRecord());
        var store = new Ext.data.Store({
            proxy: new Ext.data.DWRProxy(eval(listOperater.list)),
            reader: new Ext.data.ListRangeReader({root:'items',totalProperty: 'totalCount',id: 'id'}, MyRecord)
        });
        var colM = gridconfig.getColumn();
        var pagingBar = new Ext.PagingToolbar({
            pageSize:pagesize,
            paramNames:{start:"start",limit:"limit",conditions:"conditions"},
            store:store,
            displayInfo:true,
            beforePageText:"第",
            afterPageText:"页 共 {0} 页",
            displayMsg:'第 {0} 条到 {1} 条记录--共 {2} 条',
            emptyMsg: "没有记录",
            doLoad:function(C) {
                var B = {},A = this.paramNames;
                B[A.start] = C;
                B[A.limit] = this.pageSize;
                B[A.conditions] = conditions;
                if (this.fireEvent("beforechange", this, B) !== false) {
                    this.store.load({params:B})
                }
            },
            items:[
                    '-',
            {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed) {
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        });
        var grid = new Ext.grid.EditorGridPanel({
            renderTo:div,
            height:290,
            width:800,
            stripeRows :true,
            cm:colM,
            store:store,
            autoExpandColumn:2,
            bbar:pagingBar,
            selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),       //设置单行选中模式, 否则将无法删除数据

            clicksToEdit:1,
            tbar:[new Ext.Toolbar.TextItem(title),
            {xtype:"tbfill"},
            {pressed:true,text:'查询',id:"query",handler:function() {
                queryRecord(store);
            }},
            {xtype:"tbseparator"},
            {pressed:true,text:"全部",id:"all",handler:function() {
                conditions=[];
                store.load({params:{start:0,limit:pagesize,conditions:conditions}});;
            }},
            {xtype:"tbseparator"},
            {pressed:true,text:'添加',id:"add",handler:function() {
                addRecord(store);
            }},
            {xtype:"tbseparator"},
            {pressed:true,text:"删除",id:"delete",handler:function() {
                deleteRecord(store, grid);
            }},
            {xtype:"tbseparator"},
            {pressed:true,text:"保存",id:"save",handler:function() {
                updateRecord(store, grid);
            }}
                    ]
        });
        store.load({params:{start:0,limit:pagesize,conditions:conditions}});
    });

    var win;
    function addRecord(store) {
        if (!win)
        {
            var innerForm = new Ext.FormPanel({
                labelWidth:95,
                frame:true,
                bodyStyle:'padding:5px 5px,0',
                width:450,
                autoHeight:true,
                defaults:{width:230},
                layout:'form',
                defaultType:'textfield',
                items:gridconfig.getFormItems()

            });
            win = new Ext.Window({
                layout:'fit',
                resize:true,
                defaults:{width:450, height:800},
                width:450,
                autoHeight:true,
                closeAction:'hide',
                plain:true,
                buttonAlign:'center',
                buttons:[
                {
                    text:'submit',
                    type:'submit',
                    disabled:false,
                    handler:function() {
                        var record = gridconfig.getAddRecord();
                        eval(listOperater["addRecord"])(record, function(msg) //save data
                        {
                            Ext.MessageBox.alert("信息：", msg);                 //display the back infomation
                            this.disabled = false;
                            store.reload();
                            innerForm.getForm().reset();
                            win.hide();
                        }
                                );

                    }
                },
                {
                    text:'Close',
                    handler:function()
                    {
                        innerForm.getForm().reset();
                        win.hide();
                    }
                } ,
                {
                    text:'Reset',
                    handler:function()
                    {
                        innerForm.getForm().reset();
                    }
                }]
            });
            win.add(innerForm);
        }
        win.show();
    }
    function deleteRecord(store, grid)
    {
        var selectionModel = grid.getSelectionModel();
        var selectedcount = selectionModel.getCount();
        if (selectedcount == 0)
        {
            Ext.Msg.alert("删除数据", "您没有选中任何数据!");
            return;
        }
        else
        {
            Ext.MessageBox.confirm('提示框', '您确定要进行该操作？', function(btn) {
                if (btn == 'yes')
                {
                    var record = selectionModel.getSelected();
                    eval(listOperater["deleteRecord"])(record.data, function(msg) //delete data
                    {
                        Ext.MessageBox.alert("信息：", msg);                 //display the back infomation
                        this.disabled = false;
                        store.reload();
                    });
                }
            });
        }
    }
    function updateRecord(store, grid)
    {
        var selectionModel = grid.getSelectionModel();
        var selectedcount = selectionModel.getCount();
        if (selectedcount == 0)
        {
            Ext.Msg.alert("更新数据", "您没有选中任何数据!");
            return;
        }
        else
        {
            Ext.MessageBox.confirm('提示框', '您确定要进行该操作？', function(btn) {
                if (btn == 'yes')
                {
                    var records = selectionModel.getSelections();
                    var _msg = "";
                    var objRecords = new Array();
                    for (var i = 0; i < records.length; i++)
                    {
                        objRecords[i] = records[i].data;
                    }
                    eval(listOperater["updateRecord"])(objRecords, {callback:function(msg) //update data
                    {
                        _msg = msg;                                                 //display the back infomation
                    },
                        async:false
                    });
                    Ext.MessageBox.alert("信息：", "数据更新成功");
                    store.reload();
                }
            });
        }
    }
    /**
     * query Box
     * @param store
     */
    var querywin;
    function queryRecord(store)
    {
        if (!querywin)
        {
            var queryConfig=new QueryConfig(queryCondition);
            var querygrid=queryConfig.getQueryGrid();
            querywin = new Ext.Window({
                layout:'fit',
                resize:true,
                defaults:{width:700},
                width:700,
                autoHeight:true,
                closeAction:'hide',
                plain:true,
                buttonAlign:'center',
                buttons:[
                {
                    text:'submit',
                    type:'submit',
                    disabled:false,
                    handler:function() {
                        var dataLength=querygrid.store.data.length;
                        var queryGridRds=querygrid.getStore().getRange(0,dataLength-1);
                        for(var i=0;i<queryGridRds.length;i++)
                        {
                            if(queryGridRds[i].get("operator"))
                            {
                                conditions.push(queryGridRds[i].data);
                            }
                        }
                        querywin.hide();
                        store.load({params:{start:0,limit:pagesize,conditions:conditions}});
                    }
                },
                {
                    text:'Close',
                    handler:function()
                    {
                        querywin.hide();
                    }
                },
                {
                    text:'new Query',
                    handler:function()
                    {

                        var queryConfig=new QueryConfig(queryCondition);
                        querygrid=queryConfig.getQueryGrid();
                        querywin.remove("querygrid");
                        querywin.hide()
                        querywin.add(querygrid);
                        querywin.show();
                    }
                }]
            });
            querywin.add(querygrid);
        }
        querywin.show();
    }
}

/**
 * class gridConfig
 * @param gridParameters
 */
function GridConfig(gridParameters)
{
    this.key=new Array();
    this.type=new Array();
    this.header=new Array;
    if (typeof gridParameters=="object")
    {
        for(var i=0;i<gridParameters.length;i++)
        {
            this.key[i]=gridParameters[i].name;
            this.type[i]=gridParameters[i].type;
            this.header[i]=gridParameters[i].header;
        }
    }
    else
    {
        Ext.alert("Error,the parameters is error");
    }
}
/**
 * define the  Record that be used to receive the data for the grid