Extjs 4.0.7 中模式窗口的CURD

最新推荐文章于 2018-09-25 15:41:46 发布

trassion

最新推荐文章于 2018-09-25 15:41:46 发布

阅读量2.2k

点赞数

分类专栏： Extjs 文章标签： extjs function action download layout url

本文链接：https://blog.csdn.net/Trassion/article/details/8081567

版权

Extjs 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

这篇博客详细介绍了如何在ExtJS 4.0.7中实现模式窗口的创建、读取、更新和删除（CRUD）功能。通过定义form、设置载体窗口、编写操作函数、设计按钮控件和规范返回数据格式，展示了完整的交互流程。重点在于函数定义和数据交互的处理。

摘要由CSDN通过智能技术生成

1、定义form

var form1 = Ext.create('Ext.form.Panel', {
    id:'form1',
    frame: true,
    //title: 'Form Fields',
    //width: 340,
    bodyPadding: 5,
    //baseCls: "x-plain",
    fieldDefaults: {
        labelAlign: 'left',
        labelWidth: 90,
        anchor: '100%'
    },

    items: [{
        xtype: 'textfield',
        name: 'job_id',
        fieldLabel: 'job_fieldlabel',
        value: 'Text field value'
    }, {
        xtype: 'textfield',
        name: 'job_desc',
        //inputType: 'password',
        
        fieldLabel: 'job_fieldLabel'
    }, {
        xtype: 'textfield',
        name: 'min_lvl',
        fieldLabel: 'min_fieldlabel'
    }, {
        xtype: 'textfield',
        name: 'max_lvl',
        fieldLabel: 'max_fieldlabel',
        value: 'Textarea value'
    }]
});

2、定义window 载体窗口

var win = Ext.create('Ext.Window', {
    title: 'Resize Me',
    closeAction: 'hide',   //改变系统关闭键的方法为'hide'
    width: 500,
    height: 500,
    minWidth: 300,
    minHeight: 200,
    maximizable: true,   //是否显示最大化按钮
    layout: 'fit',
    plain: true,     //可以强制窗体颜色各背景色变的一样
    items: form1,     //指明加载哪个form
    modal: true,        //设定为模态窗口，否则底层网页还是可操作的。
    buttons: [{
        text: 'Send', handler: function () { alert('send'); }
    }, {
        text: 'Exit',
               handler: function () { win.hide(); }
    }]
});

3、先定义操作函数：

function AddRecord() {
    form1.getForm().reset();             //恢复到form定义时的样子。
    win.show();
}

function EditRecord() {
    var row = Ext.getCmp('mygrid').getSelectionModel().getSelection();
    if (row.length == 0) {
        Ext.Msg.alert("提示信息", "请您至少选择一个!");
    }
    else if (row.length > 1) {
        Ext.Msg.alert("提示信息", "对不起只能选择一个!");
    }
    else if (row.length == 1) {
        Ext.Msg.alert("只选了一个！");
        form1.getForm().loadRecord(row[0]);           //自动载入当前所选的条目，按form中各控件的name名进行加载。
        win.show();
    }
}

function DeleteRecord() {
    var row = grid.getSelectionModel().getSelection();
    if (row.length == 0) {
        Ext.Msg.alert("提示信息", "请您至少选择一个!");
    }
    else if (row.length > 1) {
        Ext.Msg.alert("提示信息", "对不起只能选择一个!");
    }
    else if (row.length == 1) {
        Ext.Msg.alert("只选了一个！");
        form1.getForm().loadRecord(row[0]);
        win.show();
    }
}

4、定义按钮控件（可以不定义的，只是为了模块化好维护些，另外上面的函数可以在定义控件中直接定义，就不用单独定义函数了）

var btnAddAction = Ext.create('Ext.Action', {
        iconCls: 'addicon',   // '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
        text: '添加',
        disabled: false,
        minWidth: 80,
        handler: function (widget, event) {
            AddRecord();
        }
    });
    var btnEditAction = Ext.create('Ext.Action', {
        iconCls: 'editicon',
        text: '编辑',
        disabled: false,
        minWidth: 80,
        handler: function (widget, event) {
            EditRecord();
        }
    });
    var btnDeleteAction = Ext.create('Ext.Action', {
        iconCls: 'deleteicon',
        text: '删除',
        disabled: false,
        minWidth: 80,
        handler: function (widget, event) {
            DeleteRecord();
        }
    });

///--------------定义右键弹出菜单--------------------------------------------
    var contextMenu = Ext.create('Ext.menu.Menu', {
        items: [
            btnAddAction,
            btnEditAction,
            btnDeleteAction
        ]
    });

5、返回的数据格式(数据提交以后，返回数据格式) 注意success返回的值是布尔型，千万不要加引号变成字符型了。

{success:true} 或 {success:false,msg='异常信息‘}

提交语句如下：

    modal: true,        //设定为模态窗口
    buttons: [{
        text: 'Send',
        handler: function () {
            if (form1.getForm().isValid()) {
                //弹出效果
                Ext.MessageBox.show(
                                    {
                                        msg: '正在保存，请稍等...',
                                        progressText: 'Saving...',
                                        width: 300,
                                        wait: true,
                                        waitConfig: { interval: 200 },
                                        icon: 'download',
                                        animEl: 'saving'
                                    }
                                );
                setTimeout(function () { }, 1000);
                alert('send');
                form1.getForm().submit({
                    url: '../ashx/TestJobDataSave.ashx',
                    //params: { 'job_id': 'job_id', 'job_desc': 'job_desc', 'min_lvl': 'min_lvl', 'max_lvl': 'max_lvl' },  //默认都是以控件名提交参数，如果参数名相同则可以不用该句。
                    method: "POST",
                    success: function (form, action) {              
                        var flag = action.result.success;           //成功返回success为true
                        if (flag ) { 
                             alert('成功返回！'); 
                        }
                    },
                    failure: function (form, action) { 
                        var errorObj = Ext.JSON.decode(action.response.responseText);   //字串转化为json对象
                        Ext.Msg.show({
                                  title: '错误提示',
                                  msg: errorObj.msg,          //同上面的msg相对应。可以改为其他值的。
                                  buttons: Ext.Msg.OK,
                                  icon: Ext.Msg.ERROR
                         }); 

                    }
                })
            }
            else {
                alert('Form is not valid !');
            }
        }
    }, {
        text: 'Exit',
        handler: function () { win.hide(); }
    }]