Ext中grid问题总结

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

      <div  id="grid-data" style="width:100%"></div>

ext中grid的写法：

 function showGrid() {
 Ext.QuickTips.init();
 Ext.form.Field.prototype.msgTarget = 'side';
 var pageSize = 10;
 // 设置checkbox
 var sm = new Ext.grid.CheckboxSelectionModel({
  singleSelect : true
   // header : true
  });
 // 设置列
 var cm = new Ext.grid.ColumnModel([sm, {
    header : "设备名称",
    width : 180,
    sortable : true,
    dataIndex : 'name',
    id : 'name'
   }, {
    header : "IP地址",
    width : 150,
    sortable : true,
    dataIndex : 'ipAddr',
    id : 'ipAddr'
   }, {
    header : "类型",
    width : 100,
    sortable : true,
    dataIndex : 'firewall',
    id : "ability",
    renderer : function(value, metadata, record, rowIndex,
      colIndex, store) {//显示数据的时候进行数据处理
     var getValue = "";
     if (record.get("firewall")) {
      getValue = "防火墙,";
     }
     if (record.get("isswitch")) {
      getValue += "交换,";
     }
     if (record.get("routing")) {
      getValue += "路由,";
     }
     return (getValue.substring(0, getValue.length - 1));
    }
   }, {
    header : "厂家",
    width : 120,
    sortable : true,
    dataIndex : 'factory',
    id : 'factory',
    renderer : function(value) {
     if (value == "1") {
      return "huawei";
     } else if (value == "2") {
      return "Cisco";
     } else {
      return "Netscreen";
     }
    }
   }, {
    header : "位置",
    width : 200,
    sortable : true,
    dataIndex : 'location',
    id : 'location'
   },

{

   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");
   });

function setPageSize(pagingBar, getGridId, getPagId) {
 pageSize = pagingBar.getValue();
 if (pageSize == "4") {
  pageSize = Ext.getCmp(getGridId).store.getTotalCount();
 }
 Ext.getCmp(getPagId).pageSize = pageSize;
 Ext.getCmp(getGridId).store.baseParams.limit = pageSize;
 Ext.getCmp(getGridId).store.load({
    params : {
     start : 0,
     limit : pageSize
    }
   });
};

}
Ext.onReady(showGrid);

 

//////////////////////////////////////////////////////////////////////////////////////////

//combox的下拉选中事件

Ext.getCmp("combo").on("select",function(comboBox){

   comboBox.getValue();//获取value的值

   comboBox.getRawValue();//获取text中的值

})

 combox是通过hiddenName将值自动绑定到后台

 只要将hiddenName:"value"中value与后台的属性对应上就行了

//store

store.getCount()获取的是分页后每页显示的数据

store.getTotalCount()是获得所有的数据

//radio

raido是通过name属性与后台属性进行对应的

inputValue:true,要传入后台的值（比如input）

//checkbox

checkbox是通过name属性与后台进行对应的

checkbox选中了为on,没有选中为off

//网络单击事件

Ext.getCmp("collectionGrid").on("rowclick",function(grid,rowIndex,columnIndex,event){

    record=Ext.getCmp("collectionGrid").getStore().getAt(rowIndex).data;//获取一条记录

     Ext.getCmp("collectName").setValue(record.customparameter)

})

//viewport自动收缩事件

Ext.getCmp("westViewport").toggleCollapse();

//改变样式

Ext.getCmp("tab").el.dom.style.top="57px";

//页面加载时出现loading

this.loadMask=new Ext.LoadMask(el,function(){

  msg:"正在加载数据,请稍等。。。",

  msgCls:"x-mask-loading",

  removeMask:true

});

this.loadMask.hide()//隐藏

this.loadMask.show()//显示