WB8使用说明-grid增删改查-弹窗(二)

承接上一篇讲的grid维护

查询操作不做解释，前提知识有：

获取grid的选取值： app.grid1.getSelection() 

实例化window: var win = new Ext.window.Window(app._win); 

window绑定事件： win.mon(win, 'ok', function() {}); 

Wb.apply(object,config)把config中的值复制到object中，defaults为config的默认值。： Wb.apply(values, Wb.decode(resp.responseText)); //把后台返回的ID_FIELD等数据应用到values中 

Wb.applyif( object, config ) : 如果object中不存在相同名称的值，则把config中的值复制到object中。

 Wb.applyIf(Wb.getValue(win), Wb.getData(rec, true)); //Wb.getData用于获取记录中的原始值，见Wb.getData方法 

 

Ajax请求（WB8取消了ajax控件）：

Wb.request({
    url: 'm?xwl=examples/crud/crud-db-access/update',
    params: values,
    success: function(resp) {
      Wb.update(rec, values); //同步在客户端表格中更新
      win.close();
    }
  });

新增操作，新建window，详细介绍window的主要属性：

autoReset : Boolean
指定窗口隐藏时是否重置窗口内所有控件的值。
Defaults to: false

createInstance : Boolean
是否创建对象的实例，如果设置为false只创建对象表达式。
Defaults to: true

createObject : Boolean
是否根据该控件html属性中dom控件的obj属性指定的对象表达式创建对象实例。
Defaults to: false

dialog : Boolean
指定该窗口是否为对话框，对话框窗口是指模态且不可调整窗口大小并具有确定和取消按钮的窗口。
Defaults to: false

editWin : Boolean
指定该窗口是否为编辑窗口，编辑窗口是指dialog为true，closeAction为hide，autoReset为true的窗口。
Defaults to: false

flat : Boolean
是否创建透明且无边框的面板。 
Defaults to: false

 复杂的新建修改操作都会用到window，常用的方法有，设置window的属性 createInstance : false  closeAction:destroy 每次打开窗口重新实例化窗口，绑定事件。关闭窗口，销毁窗口。需要特别注意对于非实例化的window调用，使用_window的方式，在前面加下划线。

新建操作如下：

var win = new Ext.window.Window(app._win); //app._win指向配置对象而非实例
win.show();
win.setIconCls('record_add_icon');
Wb.setTitle(win, '添加');
//窗口每次动态生成,方法在窗口销毁时自动销毁
win.mon(win, 'ok', function() {
  var values = Wb.getValue(win);
  Wb.request({
    url: 'm?xwl=examples/crud/crud-db-access/basic-insert', //使用basic-insert用于演示基本的操作，更简单的操作可使用'm?xwl=examples/crud/crud-db-access/insert'替代
    params: values,
    success: function(resp) {
      Wb.apply(values, Wb.decode(resp.responseText)); //把后台返回的ID_FIELD等数据应用到values中
      Wb.add(app.grid1, values); //同步在客户端表格中添加
      win.close();
    }
  });
});

 

修改操作如下：

var rec = app.grid1.getSelection()[0];
if (!rec) {
  Wb.warn('请选择 1 条需要修改的记录。');
  return;
}
var win = new Ext.window.Window(app._win); //app._win指向配置对象而非实例
win.show();
win.setIconCls('record_edit_icon');
Wb.setTitle(win, '修改');
Wb.setValue(win, rec.data); //把记录数据应用到窗口
//窗口每次动态生成,方法在窗口销毁时自动销毁
win.mon(win, 'ok', function() {
  var values = Wb.applyIf(Wb.getValue(win), Wb.getData(rec, true)); //Wb.getData用于获取记录中的原始值，见Wb.getData方法
  Wb.request({
    url: 'm?xwl=examples/crud/crud-db-access/update',
    params: values,
    success: function(resp) {
      Wb.update(rec, values); //同步在客户端表格中更新
      win.close();
    }
  });
});

 

删除操作

var recs = app.grid1.getSelection();
if (!recs.length) {
  Wb.warn('请选择需要删除的记录。');
  return;
}
Wb.confirm('确定要删除选择的 ' + recs.length + ' 条记录吗？', function() {
  Wb.request({
    url: 'm?xwl=examples/crud/crud-db-access/basic-delete', //使用basic-delete.xwl用于演示目的，建议使用delete.xwl
    params: {
      destroy: Wb.getData(recs, true)
    },
    success: function() {
      Wb.remove(app.grid1, recs);
    }
  });
});

 

 注意：上述方法传输的数组，在sql语句的配置属性arrayName中设置，可以实现批量执行