随笔-9  评论-168  文章-266  trackbacks-0

//功能:根据输入的编码传给后台分析,回传所需的数据及数据自定义的列格式,列名,查询分页等

var columns = new Array(); // 创建一个数组对象.

// ............查询控件...................
// ------面板1...列表选择查询控件1--------
var queryselect = new Ext.form.ComboBox({
 fieldLabel : '查询选择', // UI标签名称
 name : 'queryselect', // 作为form提交时传送的参数
 //allowBlank : false, // 是否允许为空
 readOnly : true, // 是否只读
 mode : 'local', // 数据模式,local为本地模式
 triggerAction : 'all', // 显示所有下列数.必须指定为'all'
 anchor : '90%',
 // typeAhead : true,
 emptyText : "请选择查询模式...",// queryselect.getSize(),
 listWidth : 150, // 下拉列表宽,一般不需设置即等同COMBOBOX宽度,这里有未知问题,必须设置.
 valueField : 'value', // 传送的值
 displayField : 'text',// 列表选择控件里的UI列表显示的文本
 store : new Ext.data.SimpleStore({ // 填充的数据
  fields : ['value', 'text'],
  data : [['mxbbh', '明细表编号'], ['ljmch', '零件名称']]
 })
});

// ------面板1...查询控件2--------
var querytext = new Ext.form.TextField({
 name : 'queryvalue',
 //allowBlank : false,
 emptyText : '输入查询内容',
 fieldLabel : '查询',
 anchor : '100%'
});

// ------查询...面板1--------
var queryform = new Ext.FormPanel({
 // width : 300,

 // url : './querybean/query.jsp',
 labelAlign : 'top', // 与控件一起定义的文本相对于控件的位置.
 collapsible : true,
 title : '查询',
 frame : true,
 autoHeight : true,
 layout : 'form', // form定义在column里,不然与控件一起定义的文本显示不出来.
 items : [queryselect, querytext],
 buttons : [{
  text : '提交',
  handler : function() {
   if (queryform.getForm().isValid())
    queryform.getForm().submit
      // Ext.Ajax.request
      ({
       url : './querybean/query.jsp',
       params : {
        command : 'query',
        start : 0,
        limit : 10
       },
       watiMsg : '查询中...请等待',
       success : function(res, v) {
        var json = Ext.util.JSON
          .decode(v.response.responseText);

        // var a1 = [{
        // name : 'ljh',
        // type : 'string'
        // }, {
        // name : 'ljmch',
        // type : 'string'
        // }];
        // var storetem = new Ext.data.JsonStore({
        // url : './querybean/query.jsp',
        // totalProperty : 'total',
        // root : 'root',
        // fields : a1,
        // baseParams : {
        // queryselectvalue : queryselect
        // .getValue(),
        // queryvalue : querytext.getValue()
        // }
        // // pruneModifiedRecords : true
        // });

        // querygrid.
        // store = storetem;
        // a = a1;
        // var root=new Array();
        // Ext.apply(a, a1);
        // Ext.apply(store, storetem);
        // querygrid.store.commitChanges();

        // querygridtoolpage.bind(querygrid.store);
        // store = querygrid.store;

        // store.loadData(json);

        Ext.apply(columns, json.columns);// 将第二个对象中的所有属性复制到第一个对象中,第三个参数对象为设置默认值.
        columns[0] = eval(columns[0]);
        for (var i = 1; i < columns.length; i++)
         // 执行string中的new表达式转换为对象
         columns[i].editor = eval(columns[i].editor);
        cm.setConfig(columns);
        store.loadData(json);

        // queryform.getForm().reset();
        // store.reload();

        // querytext.getValue().toString();

        // store.load(
        // { // 加载查询面板数据
        // //由于是表单提交,所以字段值自动提交,且不执行STORE的beforeload事件
        // params : {
        // command:'query',
        // queryvalue : querytext.getValue(),
        // start : 0,
        // limit : 10
        // }
        // }
        // ); // 加载数据源
       }
      })
  }
 }, {
  text : '重置',
  handler : function() {
   queryform.getForm().reset();
  }
 }]
});

// ..............查询表格.....................
// 限制GRID表格最多只能显示10列
var a = [{
   name : '0',
   type : 'string'
  }, {
   name : '1',
   type : 'string'
  }, {
   name : '2',
   type : 'string'
  }, {
   name : '3',
   type : 'string'
  }, {
   name : '4',
   type : 'string'
  }, {
   name : '5',
   type : 'string'
  }, {
   name : '6',
   type : 'string'
  }, {
   name : '7',
   type : 'string'
  }, {
   name : '8',
   type : 'string'
  }, {
   name : '9',
   type : 'string'
  }, {
   name : '10',
   type : 'string'
  }];
// ------------------------------------------------调试

// ---------中间右边查询面板的表格内容------------
var sm = new Ext.grid.CheckboxSelectionModel({
 handleMouseDown : Ext.emptyFn
});

var cm = new Ext.grid.ColumnModel([
// sm, {
// header : '零件号',
// dataIndex : 'ljh',
// editor : new Ext.form.TextField()
// }, {
// header : '零件名称',
// dataIndex : 'ljmch',
// editor : new Ext.form.TextField()
// }, {
// header : '零件种类',
// dataIndex : 'ljzhl',
// editor : new Ext.form.TextField()
// }
// ,{header:'明细表编号',dataIndex:'mxph'},{header:'明细表名称',dataIndex:'mxmch'},
// {header:'版本号',dataIndex:'bbh'},{header:'现行通知书号',dataIndex:'tzh'},
// {header:'页数',dataIndex:'ysh'},{header:'备注',dataIndex:'bzh'}
]);

// ------------------------------------------------调试
var store = new Ext.data.JsonStore({
 url : './querybean/query.jsp',
 totalProperty : 'total',
 root : 'root',
 fields : a,
 pruneModifiedRecords : true
});

store.on('metachange', function(S, meta) {
   Ext.Msg.alert('store.metachange', '');
  });

// -----------查询面板数据读入事件------------------
store.on('beforeload', function(s, o) {// 在请求一个数据对象之前事件(数据未读入).Ext.data.JsonStore读入数据之前的事件.
   var ststore = store;
   store.baseParams = {
    command : 'query', // 返回JSP处理的查询选择
    queryselectvalue : queryselect.getValue(),
    queryvalue : querytext.getValue()
   };
  });
store.on('load', function(storetem, records, options) {
 var s, r, o, d1;
  // Ext.Msg.alert('store.load', '');
 });

// 当数据缓存改变和数据缓存刷新的时候,调用的事件.即:请求到数据但未读入GRID中时的事件,函数参数为(STORE this)
store.on('datachanged', function(s) {
  });

var querygridtoolpage = new Ext.PagingToolbar({
 store : store,
 pageSize : 10,
 displayInfo : true,
 displayMsg : 'Displaying topics {0} - {1} of {2}',
 emptyMsg : "No topics to display"
});
var querygrid = new Ext.grid.EditorGridPanel({
 width : 640,
 height : 480,
 clicksToEdit : 1, // (3)单击次数如1,开始编辑
 cm : cm,
 sm : sm,
 store : store,
 frame : true,
 loadMask: {msg: '正在加载数据,请等待...'},
 tbar : [{
    text : '添加',
    handler : function() {
     var f = Ext.data.Record.create(a);
     var d = new f({
     // ljh : 'ljh',
     // ljmch : 'ljmch'
     });
     for (var i = 1; i < columns.length - 1; i++)
      // columns.length-1 : JSP传来的columns里包含了一个sm.
      d.set(a[i].name, '未定义'); // 初始化record值
     var d1 = new Array();
     querygrid.stopEditing();
     store.insert(0, d); // 增加一空白记录
     querygrid.startEditing(0, 1);
     store.getAt(0).dirty = true
    }
   }, '-', {
    text : '保存',
    handler : function() {
     var json = []; // 定义增加记录的数组
     var alter = [];
     for (var i = 0, c = store.getCount(); i < c; i += 1) {
      if (store.getAt(i).dirty) {
       var e = 0;
       for (var j = 0; j < columns.length - 1; j++) { // 循环判断记录是添加还是修改
        if (store.getAt(i).isModified(j.toString()))
         e++;
       }
       if (e == columns.length - 2)
        json.push(store.getAt(i).data);
       else {
        alter.push(store.getAt(i).data);
        var t = store;
       }// var record=store;
       // var s=store.getAt(i).getChanges()
       // if(store.getAt(i).isModified('1'))
       // Ext.Msg.alert('isModified',store.getAt(i).getChanges());
      }
     };
     if (json[0] == null) {
      Ext.Msg.alert('information', 'not data modify!');
      return;
     };
     var c = new Array(); // 定义数组
     for (var i = 0; i < columns.length - 1; i++) {
      c[i] = a[i]
     };
     Ext.Ajax.request({
      method : 'POST',
      url : './querybean/query.jsp',
      params : { // POST传递参数出去,每个参数以逗号隔开.如:command和data两参数
       kind : queryselect.getValue(),
       columns : Ext.encode(c), // 数组必须以编码的方式发送
       command : "save",
       record : Ext.encode(json),
       alter : Ext.encode(alter)
      },
      success : function() {
       Ext.Msg.alert('information', 'data load success!');
       store.reload();
      },
      failure : function() {
       Ext.Msg.alert('information', 'data load failure!');
      }
     })
    }
   }, '-', {
    text : '删除',
    handler : function() {
     var sm = querygrid.getSelectionModel(); // Returns the
     // grid's SelectionModel.
     var selected = sm.getSelections();
     // Returns the selected records.(getSelections() : Array)
     var ids = [];
     for (var i = 0; i < selected.length; i += 1) {
      var member = selected[i].data; // selected是Ext.data.Record类型数组.
      if (member[0]) { // Record类型的ID属性标识唯一性.
       ids.push(member[0]); // 如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
      } else {
       // 如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
       store.remove(store.getAt(i));
      }
     };
     if (ids.join('') == '')
      return;

     Ext.Msg.confirm('信息', '确定要删除所选项吗?', function(btn) {
        if (btn == 'yes') {
         // 发送删除请求
         Ext.Ajax.request({
          method : 'POST',
   %3

posted on 2008-09-22 13:24 紫蝶∏飛揚↗ 阅读(1223) 评论(3)  编辑  收藏 所属分类: EXTJS

评论:
# re: 今天公布其近期才完成的某一项目某一阶段的部分手稿,能看懂就看吧. 2009-03-17 12:26 | gzc
能不能给这个完整的代码给你参考,谢谢,最近也在用ext js  回复  更多评论
  
# re: 今天公布其近期才完成的某一项目某一阶段的部分手稿,能看懂就看吧. 2009-03-17 12:48 | gzc
能不能给这个完整的代码给 参考,谢谢,最近也在用ext js   回复  更多评论
  
# re: 今天公布其近期才完成的某一项目某一阶段的部分手稿,能看懂就看吧. 2009-03-20 11:31 | 紫蝶∏飛揚↗
@gzc
这写代码都只是手稿,看看就行了.其实这里也有蛮多错误的,帖出来只是告诉大家使用方法和其思想而已.  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: