CustomerGrid.js

最新推荐文章于 2021-04-05 19:47:08 发布

原创最新推荐文章于 2021-04-05 19:47:08 发布 · 置顶 · 479 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#header #function #layout #plugins #电话 #border

EstJs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个用于管理客户信息的界面实现方案，通过ExtJS库构建了包含数据表格、增删改查等功能的完整应用程序。该界面支持添加新客户、编辑现有客户资料、刷新数据等操作。

customerGrid = function() {
GridHandler = this;

    addrow = function() {
        OKadd = function() { };
        thiswin = this;
        Canceladd = function() { thiswin.close(); };
        var form = new Ext.FormPanel({
            layout: 'form',
            labelAlign: 'right',
            hideLabel: false,
            labelWidth: 80,
            defaultType: 'textfield',
            bodyStyle: 'padding-top:10px',
            defaults: { layout: 'form', border: false, columnWidth: .5 },
            items: [{ xtype: 'textfield', name: "company", fieldLabel: '公司名称', allowBlank: false },
                    { xtype: 'textfield', name: "cityId", fieldLabel: '城市编号', allowBlank: false },
                    { xtype: 'textfield', name: "telephone", fieldLabel: '电话' },
                    { xtype: 'textfield', name: "fax", fieldLabel: '传真' },
                    { xtype: 'textfield', name: "address", fieldLabel: '地址' },
                    { xtype: 'textfield', name: "zip", fieldLabel: '邮政编码' },
                    { xtype: 'textfield', name: "ceo", fieldLabel: '法人代表' },
                    { xtype: 'textfield', name: "employees", fieldLabel: '从业人数' },
                    { xtype: 'textfield', name: "opendate", fieldLabel: '开业日期' },
                    { xtype: 'textfield', name: "registeredCapital", fieldLabel: '注册资金' },
                    { xtype: 'textfield', name: "adder", fieldLabel: '添加人', allowBlank: false },
                    { xtype: 'textfield', name: "addTime", fieldLabel: '添加时间', allowBlank: false },
                    { xtype: 'textfield', name: "checker", fieldLabel: '申述人' },
                    { xtype: 'textfield', name: "srcID", fieldLabel: '客户来源', allowBlank: false}],
            buttons: [{ text: '保存' }, { text: '取消', handler: Canceladd}]
        });
        addrow.superclass.constructor.call(this, {
            modal: true,
            title: '添加',
            width: 300,
            height: 480,
            layout: 'fit',
            items: [form]
        });
        this.show();
    };
    Ext.extend(addrow, Ext.Window);
    store = new Ext.data.JsonStore({
        fields: ['id', 'company', 'cityId', 'telephone', 'fax', 'address', 'zip', 'ceo', 'employees',
             'opendate', 'registeredCapital', 'adder', 'addTime', 'checker', 'srcID']
    });
    columns = [
        new Ext.grid.RowNumberer(),
        { header: "编号", dataIndex: "id", sortable: true },
        { header: "公司名称", dataIndex: "company", sortable: true, editor: { xtype: 'textfield', allowBlank: false} },
        { header: "城市编号", dataIndex: "cityId", sortable: true, editor: { xtype: 'textfield', allowBlank: false} },
        { header: "电话", dataIndex: "telephone", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "传真", dataIndex: "fax", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "地址", dataIndex: "address", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "邮政编码", dataIndex: "zip", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "法人代表", dataIndex: "ceo", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "从业人数", dataIndex: "employees", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "开业日期", dataIndex: "opendate", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "注册资金", dataIndex: "registeredCapital", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "添加人", dataIndex: "adder", sortable: true, editor: { xtype: 'textfield', allowBlank: false} },
        { header: "添加时间", dataIndex: "addTime", sortable: true, editor: { xtype: 'textfield', allowBlank: false} },
        { header: "申述人", dataIndex: "checker", sortable: true, editor: { xtype: 'textfield', allowBlank: true} },
        { header: "客户来源", dataIndex: "srcID", sortable: true, editor: { xtype: 'textfield', allowBlank: false} }
    ];
    bar = [{
        text: "增加",
        handler: function() { new addrow(); }
    }, {
        text: "刷新",
        handler: GridHandler.loadData
    }
    ];
    this.loadData = function() {
        CustomerAction.Select_Action(function(e, data) {
            store.removeAll();
            store.loadData(data.result.data);
        });
    };
    editor = new Ext.ux.grid.RowEditor({
        saveText: "更新",
        cancelText: "取消",
        clicksToEditor: 2,
        errorSummary: false
    });
    customerGrid.superclass.constructor.call(this, {
        title: '客户信息',
        loadMask: { msg: '正在加载数据,请稍候...' },
        header: false,
        tbar: bar,
        columns: columns,
        store: store,
        plugins: [editor]
    });
    this.loadData();
};
Ext.extend(customerGrid, Ext.grid.GridPanel);
BMcustomerTab = function() {
    BMcustomerTab.superclass.constructor.call(this, {
        title:"客户信息",
        id: 'BMcustomerTab',
        autoScroll:true,
        layout:'fit',
        closable: true,
        items:[new customerGrid()]
    });
};
Ext.extend(BMcustomerTab, Ext.Panel);