Extjs 4.0.7 中模式窗口的CURD

1、定义form

[javascript]
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 载体窗口

[javascript]
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、先定义操作函数：
[javascript]
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、定义按钮控件（可以不定义的，只是为了模块化好维护些，另外上面的函数可以在定义控件中直接定义，就不用单独定义函数了）

[javascript]
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,
        h

补充：web前端 , JavaScript ,