Ext 查询控件

最新推荐文章于 2021-02-24 09:08:30 发布

fengkuanghun

最新推荐文章于 2021-02-24 09:08:30 发布

阅读量1.8k

点赞数

分类专栏： ExtJS 2.0 文章标签： ext function string header command json

本文链接：https://blog.csdn.net/fengkuanghun/article/details/3482625

版权

ExtJS 2.0 专栏收录该内容

46 篇文章 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) {
});

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