扩展Ext.grid.GridPanel

 www.wuanju.com 就是用的此Extjs扩展:

Ext.namespace("Ext.ux.grid");

/**

* grid

* @class Ext.ux.grid.grid.KingGridPanel

* @extends Ext.grid.GridPanel

* @author king

*/

Ext.ux.grid.KingGridPanel = Ext.extend(Ext.grid.GridPanel, {

    actions: null,

    title: null,

    addConfig: null,    //添加按钮配置

    editConfig: null,   //编辑按钮配置

    deleteConfig: null, //删除按钮配置

    hasPaging: true,    //是否分页工具栏

    dataUrl: null,      //数据网址

    dataConfig: null,   //GridPanel基本配置

    pageSize: 25,   //分页大小

    searchFieldName: null,  //搜索关键字段名称,如果为空则不显示搜索框

    loadMask: {

        msg: '正在加载数据,请稍侯. . . . . .'

    },

    autoHeight: true,

    viewConfig: {

        forceFit: true

    },

    frame: true,

    border: true,

    header: false,

    layout: "fit",

    initComponent: function () {

        this.initConfig();

        var self = this;

        var toolbar = new Ext.Toolbar({});

        if (this.addConfig.length > 0) {

            var btn = new Ext.Button({

                id: 'btnAdd',

                text: '添加' + this.title,

                tooltip: '添加' + this.title,

                iconCls: 'add',

                handler: this.doAdd.createDelegate(this)

            });

            toolbar.add(btn, '-');

        }

 

        if (this.editConfig.length > 0) {

            var btn = new Ext.Button({

                id: 'btnEdit',

                text: '编辑' + this.title,

                tooltip: '编辑' + this.title,

                iconCls: 'edit',

                handler: this.doEdit.createDelegate(this)

            });

            toolbar.add(btn, '-');

        }

 

        if (this.deleteConfig.length > 0) {

            var btn = new Ext.Button({

                id: 'btnDelete',

                text: '删除' + this.title,

                tooltip: '删除' + this.title,

                iconCls: 'delete',

                handler: this.doDelete.createDelegate(this)

            });

            toolbar.add(btn, '-');

        }

 

        //显示顶部工具栏

        if (this.actions != null && this.actions.length > 0) {

            for (var i = 0; i < this.actions.length; i++) {

                var action = this.actions[i];

                var btn = new Ext.Button({

                    id: "btn" + i,

                    text: action.text,

                    tooltip: action.tooltip,

                    iconCls: action.iconCls,

                    handler: function () {

                        self.doActionToGrid(action.url);

                    }

                });

                btn.disabledIfLessThan = action.disabledIfLessThan;

                toolbar.add(btn, "-");

            }

        }

 

        //根据搜索关键词判断是否显示搜索工具条

        if (this.searchFieldName != null && this.searchFieldName.length > 0) {

            var Searchbutton = ([

                new Ext.form.Label({

                    html: '搜索:&nbsp;'

                }),

                new Ext.app.SearchField({

                    store: this.store,

                    width: 320,

                    paramFieldName: this.searchFieldName,

                    emptyText: '按关键词搜索...'

                })

            ]);

            toolbar.add(Searchbutton);

        }

 

        this.tbar = toolbar;

 

        //是否显示分页

        if (this.hasPaging) {

            this.bbar = new Ext.PagingToolbar({

                displayInfo: true,

                emptyMsg: "没有数据显示",

                displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',

                store: this.store,

                pageSize: this.pageSize

            });

        };

 

        Ext.ux.grid.KingGridPanel.superclass.initComponent.call(this);

 

        //双击事件

        this.on('rowdblclick', function (f, e) {

            self.doEdit();

        }, this);

 

        this.on("rowcontextmenu", function (grid, rowIndex, e) {

            e.preventDefault();

            if (rowIndex < 0) { return; }

            var treeMenu = new Ext.menu.Menu([

                { text: "添加" + this.title, iconCls: 'add', pressed: true, handler: this.doAdd.createDelegate(this) },

                { text: "编辑" + this.title, iconCls: 'edit', pressed: true, handler: this.doEdit.createDelegate(this) },

                { text: "删除" + this.title, iconCls: 'delete', pressed: true, handler: this.doDelete.createDelegate(this) }

            ]);

            treeMenu.showAt(e.getPoint());

        });

    }

    , initConfig: function () {

        var gRecord = new Array();

        var columns = '';

        for (var i = 0; i < this.dataConfig.length; i++) {

            var g = this.dataConfig;

            if (columns.length > 0) {

                columns += ',';

            }

            if (g[i].type == "datetime") {

                columns += '{header:"' + g[i].header + '",dataIndex:"' + g[i].dataIndex + '",width:100,sortable:' + g[i].sortable + ',hidden:' + g[i].hidden + ',renderer: this.renderDate}';

            } else {

                columns += '{header:"' + g[i].header + '",dataIndex:"' + g[i].dataIndex + '",width:100,sortable:' + g[i].sortable + ',hidden:' + g[i].hidden + '}';

            }

 

            gRecord[gRecord.length] = {

                name: g[i].dataIndex

            }

        }

        this.cm = new Ext.grid.ColumnModel(eval('([' + columns + '])'));

 

        var reader = new Ext.data.JsonReader({

            totalProperty: "totalCount",

            root: "data"

        }, Ext.data.Record.create(gRecord));

        var newStore = new Ext.data.Store({

            baseParams: { MaxRowsPerPage: this.pageSize },

            proxy: new Ext.data.HttpProxy({ url: this.dataUrl }),

            reader: reader

        });

        newStore.load({

            params: { CurrentPage: 1, MaxRowsPerPage: this.pageSize }

        });

        this.store = newStore;

    }

    , onRender: function () {

        Ext.ux.grid.KingGridPanel.superclass.onRender.apply(this, arguments);

    }

    , doActionToGrid: function (action_url) {

        alert(action_url);

        //        var c = this.getSelectionModel().getCount();

        //        var self = this;

        //        if (c > 0)

        //            Ext.MessageBox.confirm('prompt', 'Are you sure?', function (btn, text) {

        //                if (btn == 'yes') {

        //                    //self.doActualActionToGrid(action_url);

        //                }

        //            });

        //        else

        //            Ext.MessageBox.alert('prompt', 'No selection!');

    }

    , doAdd: function () {

        //this.addConfig是一个二维数组格式:[链接,窗口宽,窗口高,]

        var tabs = new Ext.Panel({

            region: 'center',

            margins: '0 0 0 0',

            border: false,

            defaults: { autoScroll: true },

            items: [{

                html: '<iframe id="iframe" name="iframe" src="' + this.addConfig[0] + '" width="100%" height="' + this.addConfig[2] + '" frameborder="0" scrolling="no"></iframe>'

            }]

        });

        var win = new Ext.Window({

            title: '新增' + this.title,

            closable: true,

            resizable: false, //用户是否可以调整窗体大小,默认值为true表示可以调整大小。

            width: this.addConfig[1],

            height: this.addConfig[2] + 36,

            modal: true,

            plain: true,

            layout: 'border',

            items: [tabs]

        });

        win.show(this);

    }

    , doEdit: function () {

        //this.editConfig是一个二维数组格式:[链接,窗口宽,窗口高,]

        var row = this.getSelectionModel().getSelections();

        if (row.length == 1) {

            var fieldName = this.getColumnModel().getDataIndex(0);

            var id = row[0].get(fieldName);

            var tabs = new Ext.Panel({

                region: 'center',

                margins: '0 0 0 0',

                border: false,

                defaults: { autoScroll: true },

                items: [{

                    html: '<iframe id="iframe" name="iframe" src="' + this.editConfig[0] + '?id=' + id + '" width="100%" height="' + this.editConfig[2] + '" frameborder="0" scrolling="no"></iframe>'

                }]

            });

            var win = new Ext.Window({

                title: '编辑' + this.title,

                closable: true,

                resizable: false, //用户是否可以调整窗体大小,默认值为true表示可以调整大小。

                width: this.editConfig[1],

                height: this.editConfig[2] + 36,

                modal: true,

                plain: true,

                layout: 'border',

                items: [tabs]

            });

            win.show(this);

        }

        else {

            Ext.MessageBox.show({

                title: '提示',

                msg: '请选择1条记录进行编辑。',

                buttons: Ext.MessageBox.OK,

                animEl: 'mb4',

                icon: Ext.MessageBox.INFO

            });

        }

    }

    , doDelete: function () {

        Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?', this.showResult.createDelegate(this));

    }

    , showResult: function (btn) {

        if (btn == 'yes') {

            var row = this.getSelectionModel().getSelections();

            var fieldName = this.getColumnModel().getDataIndex(0);

            var jsonData = "";

            for (var i = 0, len = row.length; i < len; i++) {

                var id = row[i].get(fieldName);

                if (i == 0)

                    jsonData = id;                                  //这样处理是为了删除的Lambda语句方便

                else

                    jsonData = jsonData + "," + id;                 //这样处理是为了删除的Lambda语句方便

            }

 

            if (jsonData == "") {

                Ext.MessageBox.show({

                    title: '提示',

                    msg: '请选择至少1条功能记录进行删除。',

                    buttons: Ext.MessageBox.OK,

                    animEl: 'mb4',

                    icon: Ext.MessageBox.INFO

                });

                return;

            }

 

            var conn = new Ext.data.Connection();

            conn.request({

                url: this.deleteConfig[0],

                params: { id: jsonData },

                method: 'post',

                scope: this,

                callback: function (options, success, response) {

                    if (success) {

                        Ext.Msg.alert('删除成功!');

                        this.store.load({ params: { start: 0, limit: this.pageSize} });

                    }

                    else {

                        Ext.Msg.alert('删除失败!');

                    }

                }

            })

        }

    }

    ,renderDate: function(value) {

        var d = new Date(parseInt(value.replace("/Date(", "").replace(")/",""), 10));

        return d.dateFormat('Y-m-d H:i:s');

    }

});

Ext.reg("KingGridPanel", Ext.ux.grid.KingGridPanel);

 

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

浪潮之巅

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值