EXTJS4.x之实战项目（5）ArticleGridPanel实现增删改查之增

增删改查是每个系统都必备的基础功能，下面就以文章资源管理为例实现增删改查功能。

1）为ArticleGridPanel添加控件，如下图红色部分所示

TextField的labelAlign要设置为right才能得到上述效果。

2）添加ArticleGridPanelController，添加一个Controller设置以下属性：

userClassName : ArticleGridPanelController;

views : ArticleGridPanel;

添加以下函数：init,add,del,detail,search，除了init其他的函数均有一个参数sender。如下图所示

3）编写init函数

this.control(
{
    'ArticleGridPanel > toolbar > button[text=添加]': 
    {
        click: this.add
    },
    'ArticleGridPanel > toolbar > button[text=删除]': 
    {
        click: this.del
    },
    'ArticleGridPanel > toolbar > button[text=查看]': 
    {
        click: this.detail
    },
    'ArticleGridPanel > toolbar > button[text=查询]': 
    {
        click: this.search
    }
}
);

以上代码主要是绑定事件。

5）制作弹出窗口，拖动一个window控件到views分组中，设置userClassName为ArticleInfoWindow，title设置为“文章资源信息”，modal打勾。制作出如下界面。

其中每个field的name属性和text的属性设置为一样，比如第一个textfield控件的text属性为id，name属性为id。

5）编写add函数，当用户点击“添加”按钮之后弹出一个窗口让他输入相关信息以插入数据库。代码如下

var from;
var win;
function submit() {
    if (!from.getForm().isValid()) return;
    from.getForm().submit({
        waitMsg: '正在提交数据',
        waitTitle: '提示',
        url: '../article/add',
        method: 'POST',
        success: function(form, action) {
            Ext.Msg.alert('提示', '保存成功');
            sender.ownerCt.ownerCt.store.reload();
            win.close();
        },
        failure: function(form, action) {
            Ext.Msg.alert('提示', '接口异常');
        }
    });
}

win = Ext.create('MyApp.view.ArticleInfoWindow', {
    buttons: [
    { text: '保存', handler: submit },
    ],
    buttonAlign: 'center'
});

win.show();
from = win.items.get(0);
id = from.items.get(0);
id.hide();

6）为ArticleGridPanel添加分页控件，拖入一个pagingtoolbar控件到ArticleGridPanel中。并设置以下属性

displayMsg: '当前显示{0} - {1}条，共{2}条数据',
emptyMsg: '没有数据',
store: 'ArticleStore'

保存运行将看到如下图效果，可以添加文章到数据库了。