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

来源：互联网发布：淘宝野模路边真实街拍编辑：程序博客网时间：2024/06/10 00:33

之前实现了增删改查的添加功能，现在实现修改功能。

实现的效果是点中gridpanel的一行后点击查看按钮弹出详情窗口。在详情窗口上修改信息后点击保存即可修改数据库里面的内容。

1）将ArticleInfoWindow中的from的id输入框设置成只读。

给textfield属性的readonly打勾即可。

2）编写ArticleGridPanelController的detail函数，内容如下：

    var grid = sender.ownerCt.ownerCt;    var selRecords = grid.getSelectionModel().getSelection();    var len = selRecords.length;    var ids = "";    if (len == 0) {        Ext.MessageBox.alert("提示消息", "您未选中行!");        return false;    }    if (len > 1) {        Ext.MessageBox.alert("提示消息", "一次只能查看一行!");        return false;    }        var from;    var win;    function submit() {        if (!from.getForm().isValid()) return;        from.getForm().submit({            waitMsg: '正在提交数据',            waitTitle: '提示',            url: '../article/update',            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);    data = selRecords[0];    from.getForm().findField("id").setValue(data.get("id"));      from.getForm().findField("name").setValue(data.get("name"));      from.getForm().findField("logo").setValue(data.get("logo"));      from.getForm().findField("description").setValue(data.get("description"));      from.getForm().findField("data").setValue(data.get("data"));

代码的作用是先获取用户选取的行，如果等于0则提示没有选择要查看的数据，如果大于1则提示一次只能查看一个。如果刚好选择一行则弹出窗口，显示详情，点击保存把数据提交到服务器。

保存运行，如下