Ext中grid问题总结

最新推荐文章于 2021-01-12 15:18:23 发布

iteye_3289

最新推荐文章于 2021-01-12 15:18:23 发布

阅读量216

点赞数

文章标签： EXT Cisco IE 防火墙 prototype

jsp页面中定义一个层用来将grid渲染进去

ext中grid的写法：

{

header:'日期',

dataIndex:'time',

type:'date',

renderer:Ext.util.Format.dateRenderer('Y年m月d日') //日期的格式化

}]);
cm.defaultSortable = true;
// 设置字段
var fields = [{
    name : "name",
    mapping : "name"
   }, {
    name : "ipAddr",
    mapping : "ipAddr"
   }, {
    name : "firewall",
    mapping : "firewall"
   }, {

    name : "isswitch",
    mapping : "isswitch"
   }, {
    name : "factory",
    mapping : "factory"
   }, {
    name : "routing",
    mapping : "routing"
   }, {
    name : "location",
    mapping : "location"
   }, {
    name : "account",
    mapping : "account"

   }, {
    name : "config",
    mapping : "config"
   }, {
    name : "id",
    mapping : "id"
   }, {
    name : "memo",
    mapping : "memo"
   }, {
    name : "mode",
    mapping : "mode"
   }, {
    name : "model",
    mapping : "model"
   }, {
    name : "plainPassword",
    mapping : "plainPassword"
   }, {
    name : "rootPassword",
    mapping : "rootPassword"
   }, {
    name : "model",
    mapping : "model"
   },{

//处理时间显示格式

name:"time",

type:"date',

dateFormat:"Y-m-dTH:i:s"

}];
// 获取数据
var store = new Ext.data.Store({
    proxy : new Ext.data.HttpProxy({
       url : "deviceQuery.action"
      }),
    reader : new Ext.data.JsonReader({
       totalProperty : "totalSize",
       root : "devices",
       successProperty : 'msg',
       fields : fields
      }),

//数据加载成后进行排序
    sortInfo : {
     field : "id",
     direction : "desc"
    }
   });
store.load({
    params : {
     start : 0,
     limit : pageSize
    },
    callback:function(records,options)
    {
      oriTotalCount=store.getTotalCount();//保存所有的数据
    }
   });
// 创建分页栏
var pagingBar = new Ext.PagingToolbar({
    id : "pagingBar",
    displayInfo : true,
    emptyMsg : "没有数据显示",
    displayMsg : "显示从{0}条数据到{1}条数据，共{2}条数据",
    store : store,
    pageSize : pageSize,
    items : ['-', {
       xtype : 'label',
       text : '每页显示',
       style : 'margin-left:5px;margin-right:5px;'
      }, {
       id : "combox", //combox
       xtype : 'combo',
       store : new Ext.data.JsonStore({
          fields : ["value", "text"],
          data : Nda.sysmanage.pagToolbar
         }),
       valueField :'value',//传入后台的数据
       displayField :'text',//在页面显示的数据
       mode : 'local',//数据是来自本地的（如果mode:'remote'表示是从后台获取数据）
       triggerAction : 'all',//显示下拉中所有的数据（如果triggerAction:"query"将会根据用户输入的值自动过滤相当于一个自动补全功能）
       fieldLabel : '',
       editable : false,//用户不能再下拉框中输入值,只能从下拉框中选择数据
       width : 60,
       listeners : {
        "beforerender" : function(store,options){//给下了框设置默认值
         this.value = 10;
        }
       }
      }, {
       xtype : 'label',
       text : '记录',
       style : 'margin-left:5px;'
      }]
   });
// 创建grid
var gridData = Ext.get("grid-data")
var grid = new Ext.grid.GridPanel({
    id : "grid",
    stripeRows : true,
    floating : false,
    autoHeight : true,
    width : gridData.getComputedWidth(),
    autoWidth : false,
    bodyStyle : 'margin-right:5px;',
    loadMask : {
     msg : '正在加载数据，请稍侯……'
    },
    viewConfig : {
     forceFit : true
    },
    border : false,
    store : store,
    sm : sm,
    cm : cm,
    bbar : pagingBar
   });

//Ext中grid随ie浏览器的变大缩小而变大缩小
window.onresize = function() {
grid.setWidth(0), grid.setWidth(gridData.getComputedWidth());
}
grid.render(gridData);

//将grid中复选框改成单选按钮（此方法是通过修改复选框的样式控制的）
var gridEl = grid.getEl();
gridEl.select('div.x-grid3-hd-checker').removeClass('x-grid3-hd-checker'); // 删除表头的checkbox
grid.store.on('load', function() { // 数据加载完毕替换为checkbox列增加一个class，然后我们在这个class中修改图片
    gridEl.select("div[class=x-grid3-row-checker]").each(
      function(x) {
       x.addClass('x-grid3-row-radioBtn');
      });
   })

/** ****************清空用户输入的数据方法*********************/
Ext.get("reset").on("click", function() {
    $("factorys").value = "";
    document.getElementById("name").value = "";
    document.getElementById("location").value = "";
    document.getElementById("ipAddr").value = "";
    document.getElementById("abilitys").value = "";
   });
/** ********根据用户输入的值进行查询*****************************/

var button = Ext.get("button-select");

button .on("click", function() {
    select();//查询方法
   });

function select() {
  var name = document.getElementById("names").value;// 设备名称
  var location = document.getElementById("location").value;// 位置
  var ipAddr = document.getElementById("ipAddrs").value;// ip地址
  var ability = document.getElementById("abilitys").value;// 类型
  var factory = document.getElementById("factorys").value;// 工厂
  var store = Ext.getCmp("grid").store;
  store.baseParams = {
   'name' : name,
   'location' : location,
   'ipAddr' : ipAddr,
   'ability' : ability,
   'factory' : factory
  };

//用户自定义每页显示的页数

  store.baseParams.start = 0;
  if (Ext.getCmp("combox").getValue() != 4) {//如果不是显示全部就显示下拉框中对应的数据
   Ext.getCmp("pagingBar").pageSize = Ext.getCmp("combox").getValue();//下拉框显示的数据
   store.baseParams.limit = Ext.getCmp("combox").getValue();//获取下拉框中的值
  } else {
   //如果是显示所有的数据就将第一次加载的数据绑定进去（此种写法用来解决点击查询时显示所有的数据）
   Ext.getCmp("pagingBar").pageSize =oriTotalCount;//所有的数据
   store.baseParams.limit =oriTotalCount;
  }
  store.load();
}
// 用户自动设置每页显示的页数（选择改变事件）
Ext.getCmp("combox").on("select", function(pagingBar) {
    setPageSize(pagingBar, "grid", "pagingBar");
   });