JavaScript的ExtJS框架中表格的编写教程_ExtJs

extjs中表格的特性简介
表格由类ext.grid.gridpanel定义，继承自ext.panel，xtype为grid
表格的列信息由ext.grid.columnmodel定义
表格的数据存储器由ext.data.store定义，根据解析数据的不同，数据存储器可具体分为如下几种：

jsonstore，simplestore，groupingstore…

一个表格的基本编写过程：

1、创建表格列模型

var cm = new ext.grid.columnmodel({
 {header: '角色', dataindex: 'role'},
 {header: '等级', dataindex: 'grade'},
 {header: '创建日期', dataindex: 'createdate', type: 'date', renderer: ext.util.format.daterenderer('y年m月d日')} //创建日期类型的数据
});

2、创建数据数组

var data = [
  ['士兵','7','2011-07-2412:34:56'],
  ['将军','10','2011-07-2412:34:56'],
];

3、创建一个数据存储对象store，包含两部分：proxy，获取数据的方式；reader，解析数据的方式

arrayreader的mapping用来设置列的排列顺序

var store = new ext.data.store({
  proxy: new ext.data.memoryproxy(data),
  reader: new ext.data.arrayreader({}, [
    {name: 'role', mapping: 1},
    {name: 'grade', mapping: 0}
    {name: 'createdate', mapping: 2, type:'date', dateformat:'y-m-dh:i:s'} //创建日期列和显示格式
  ])
});
store.load();

4、创建gridpanel，装配columnmodel和store

var grid = new ext.grid.gridpanel({
 renderto: 'grid',
 store: store,
 cm: cm
});

另外获取远程数据可以使用scripttagproxy,如下所示

var store = new ext.data.store({
  proxy: new ext.data.scripttagproxy({
   url:'http://...'}),
  reader: new ext.data.arrayreader({}, [
    {name: 'role', mapping: 1},
    {name: 'grade', mapping: 0}
  ]),
  sortinfo: {field: "role", direction: "asc"} //设置默认排序列，asc/desc
});

表格的常用属性功能

var grid = new ext.grid.gridpanel({
 enablecolumnmove: false, //禁止拖放列
 enablecolumnresize: false, //禁止改变列的宽度
 striperows: true, //斑马线效果
 loadmask: true, //读取数据时的遮罩和提示功能
 renderto: 'grid',
 store: store
 cm: cm
});

var cm = new ext.grid.columnmodel({
 {header: '角色', dataindex: 'role', width:90, sortable: true}, //width设置列宽度，默认为100px，sortable设置排序功能
 {id:'grade', header: '等级', dataindex: 'grade', width:40}
});
var grid = new ext.grid.gridpanel({
 renderto: 'grid',
 store: store,
 cm: cm
 viewconfig:{  //让每列自动填充满表格
 forcefit: true
 }
 autoexpandcolumn: 'grade' //自动延伸列，列的id在columnmodel中定义
});

渲染表格，为表格设置特殊样式
只需要在cm里面增加一个renderer属性，添加一个自定义函数来渲染传进来（由ext自动传递）的参数的样式即可，即在返回value之前拼装上相应的html和css或者js响应事件。

function rendersex(value) {
  if (value == 'male') {
    return "<span style='color:blue;'>男</span><img src='images/icon_male.png' />";
  } else {
    return "<span style='color:red;'>女</span><img src='images/icon_female.png' />";
  }
}

var cm = new ext.grid.columnmodel([
  {header:'id',dataindex:'id'},
  {header:'name',dataindex:'name'},
  {header:'sex',dataindex:'sex',renderer:rendersex},
]);

var data = [
  ['1','jason','male'],
  ['2','kate','female']
];

var store = new ext.data.store({
  proxy: new ext.data.memoryproxy(data),
  reader: new ext.data.arrayreader({}, [
    {name: 'id'},
    {name: 'name'},
    {name: 'sex'}
  ])
});
store.load();

var grid = new ext.grid.gridpanel({
  autoheight: true,
  renderto: 'grid',
  store: store,
  cm: cm
});

自动显示行号，只要在创建cm时创建一个rownumberer就可以了

var cm = new ext.grid.columnmodel([
 new ext.grid.rownumberer(),  //显示行号
  {header:'id',dataindex:'id'},
  {header:'name',dataindex:'name'},
  {header:'sex',dataindex:'sex',renderer:rendersex},
]);

删除列

store.remove(store.getat(i));

刷新表格

grid.view.refresh();

为表格添加复选框
需要使用checkboxselectionmodel
selectionmodel sm在使用时要放到cm和表格中

var sm = new ext.grid.checkboxselectionmodel();

var cm = new ext.grid.columnmodel([
  new ext.grid.rownumberer(),
  sm,
  {header:'编号',dataindex:'id'},
  {header:'名称',dataindex:'name'}
]);

var data = [
  ['1','name1'],
  ['2','name2']
];

var store = new ext.data.store({
  proxy: new ext.data.memoryproxy(data),
  reader: new ext.data.arrayreader({}, [
    {name: 'id'},
    {name: 'name'}
  ])

});
store.load();

var grid = new ext.grid.gridpanel({
  autoheight: true,
  renderto: 'grid',
  store: store,
  cm: cm,
  sm: sm
});

通过rowselectionmodel设置只选择一行：

var grid = new ext.grid.gridpanel({
  autoheight: true,
  renderto: 'grid',
  store: store,
  cm: cm,
  sm: new ext.grid.rowselectionmodel({singleselect:true})
});

使用选择模型获取数据

grid.on('click', function() {
  var selections = grid.getselectionmodel().getselections();
  for (var i = 0; i < selections.length; i++) {
    var record = selections[i];
    ext.msg.alert(record.get("id"));
  }
});

表格视图
从mvc的思想来看表格控件：
* ext.data.store可看做模型
* ext.grid.gridpanel可看做控制器
* ext.grid.gridview可看做视图
* 一般gridview由gridpanell自动生成，如果想设置gridview的属性时，可以通过ext.grid.gridpanel的getview()获得视图实例

ext.get('button1').on('click', function() {
 grid.getview().scrolltotop();
  grid.getview().focuscell(0, 0);
  var cell = grid.getview().getcell(0, 0);
  cell.style.backgroundcolor = 'red';
});

使用gridpanel的viewconfig在创建表格时设置gridview的初始化参数

var grid = new ext.grid.gridpanel({
  height: 100,
  width: 400,
  renderto: 'grid',
  store: new ext.data.store({
    autoload: true,
    proxy: new ext.data.memoryproxy(data),
    reader: new ext.data.arrayreader({}, meta)
  }),
  columns: meta,
  viewconfig: {
    columnstext: '显示的列', //设置下拉菜单提示文字
    scrolloffset: 30,  //设置右侧滚动条的预留宽度
    sortasctext: '升序',  //设置下拉菜单提示文字
    sortdesctext: '降序',  //设置下拉菜单提示文字
    forcefit: true  //自动延展每列的长度
  }
});

为表格添加分页工具条
* 可以使用gridpanel的bbar属性，并创建ext.pagingtoolbar分页工具条对象
* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。

var grid = new ext.grid.gridpanel({
  renderto: 'grid',
  autoheight: true,
  store: store,
  cm: cm,
  bbar: new ext.pagingtoolbar({
    pagesize: 10,  //每页显示10条数据
    store: store,
    displayinfo: true,  //显示数据信息
    displaymsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
    emptymsg: "没有记录"  //没有数据时显示的信息
  })
});
store.load();

从后台脚本获取分页数据

使用httpproxy传递请求，获取服务器的json数据，交给jsonreader解析

var cm = new ext.grid.columnmodel([
  {header:'编号',dataindex:'id'},
  {header:'名称',dataindex:'name'}
]);
var store = new ext.data.store({
  proxy: new ext.data.httpproxy({url:'page.jsp'}),
  reader: new ext.data.jsonreader({
    totalproperty: 'totalproperty',
    root: 'root'
  }, [
    {name: 'id'},
    {name: 'name'}
  ])
});
var grid = new ext.grid.gridpanel({
  renderto: 'grid',
  autoheight: true,  //数据传回来之前高度未知，所以要使用自适应高度
  store: store,
  cm: cm,
  bbar: new ext.pagingtoolbar({
    pagesize: 10,
    store: store,
    displayinfo: true,
    displaymsg: '显示第 {0} 条到 {1} 条记录 / 共 {2} 条',
    emptymsg: "没有记录"
  })
});
store.load({params:{start:0,limit:10}});

如果想让分页工具条显示在表格的顶部，可以使用gridpanel的tbar属性设置添加工具条

让extjs在对返回的数据进行分页

* 需要在页面中引入examples/locale目录下的pagingmemoryproxy.js文件
* 再使用pagingmemoryproxy设置代理

var store = new ext.data.store({
  proxy: new ext.data.pagingmemoryproxy(data),
  reader: new ext.data.arrayreader({}, [
    {name: 'id'},
    {name: 'name'},
    {name: 'descn'}
  ])
});
//在创建gridpanel之后调用
store.load({params:{start:0,limit:3}});

可编辑表格控件editorgrid的使用

制作一个简单的editorgrid的步骤：

1、定义列columnmodel，在里面添加editor属性

var cm = new ext.grid.columnmodel([{
  header: '编号',
  dataindex: 'id',
  editor: new ext.grid.grideditor(
    new ext.form.textfield({
      allowblank: false //不允许在textfield中输入空值
    })
  )
}, {
  header: '名称',
  dataindex: 'name',
  editor: new ext.grid.grideditor(
    new ext.form.textfield({
      allowblank: false
    })
  )
}]);

2、准备一个数组

var data = [
  ['1','jason'],
  ['2','jay']
];

3、创建ext.data.store，设置内存代理，设置arrayreader解析数组

var store = new ext.data.store({
  proxy: new ext.data.memoryproxy(data),
  reader: new ext.data.arrayreader({}, [
    {name: 'id'},
    {name: 'name'}
  ])
});

4、加载数据，创建editorgridpanel

store.load();
var grid = new ext.grid.editorgridpanel({
  autoheight: true,
  renderto: 'grid',
  store: store,
  cm: cm
});

为可编辑表格添加和删除数据

1、使用record的create方法创建一个记录集myrecord,myrecord相当于一个类

var myrecord = ext.data.record.create([
  {name: 'id', type: 'string'},
  {name: 'name', type: 'string'}
]);
store.load();

2、创建editorgridpanel面板，在属性tbar中创建ext.toolbar

var grid = new ext.grid.editorgridpanel({
  autoheight: true,
  renderto: 'grid',
  store: store,
  cm: cm,
  tbar: new ext.toolbar(['-', { //-表示菜单分隔符
    text: '添加一行',
    handler: function(){
      var p = new myrecord({
        id:'',
        name:''
      });
      grid.stopediting(); //关闭表格的编辑状态
      store.insert(0, p); //创建的record插入store的第一行
      grid.startediting(0, 0); //激活第一行第一列的编辑状态
    }
  }, '-', {
    text: '删除一行',
    handler: function(){
      ext.msg.confirm('信息', '确定要删除？', function(btn){
        if (btn == 'yes') {
          var sm = grid.getselectionmodel(); //获取表格的选择模型
          var cell = sm.getselectedcell();  //获取选中的单元格
          var record = store.getat(cell[0]); //通过行号得到store这一行对应的record
          store.remove(record);  //移除数据
        }
      });
    }
  }, '-'])
});

为可编辑表格保存修改的结果

在上面例子的基础之上，添加一个保存按钮

text: '保存',
handler: function(){
  var m = store.modified.slice(0); //获得store中修改过得数据
  for (var i = 0; i < m.length; i++) { //验证表格信息是否正确，是否包含空格
    var record = m[i];
    var fields = record.fields.keys;

    for (var j = 0; j < fields.length; j++) {
      var name = fields[j];
      var value = record.data[name];

      var colindex = cm.findcolumnindex(name);
      var rowindex = store.indexofid(record.id);
      var editor = cm.getcelleditor(colindex).field;

      if (!editor.validatevalue(value)) {
        ext.msg.alert('提示', '请检查输入的数据是否正确！', function(){
          grid.startediting(rowindex, colindex);
        });
        return;
      }
    }
  }
  var jsonarray = [];
  ext.each(m, function(item) {
    jsonarray.push(item.data); //把修改过得数据放到jsonarray中
  });

  ext.lib.ajax.request(  //使用ajax请求提交给后台
    'post',
    'save_data.jsp',
    {success: function(response){ //返回成功
      ext.msg.alert('信息', response.responsetext, function(){
        store.reload();
      });
    },failure: function(){  //返回失败
      ext.msg.alert("错误", "服务器保存数据出错！");
    }},
    'data=' + encodeuricomponent(ext.encode(jsonarray))
  );
}

另外store可以设置属性prunemodifiedrecords: true。这样，每次remove或load操作时store会自动清除modified标记，可以避免出现下次提交时还会把上次那些modified信息都带上的现象。

限制表格输入的数据类型

numberfield

{
  header:'id',
  dataindex:'id',
  editor:new ext.grid.grideditor(new ext.form.numberfield({ //numberfield限制只能输入数字
    allowblank: false,
    allownegative: false, //不能输入减号
    maxvalue: 10
  }))
}

combobox

var combodata = [
  ['0','java'],
  ['1','android']
];
{
  header:'combobox',
  dataindex:'combo',
  editor:new ext.grid.grideditor(new ext.form.combobox({
    store: new ext.data.simplestore({
      fields:['value','text'],
      data: combodata
    }),
    emptytext: '请选择',
    mode: 'local',
    triggeraction: 'all',
    valuefield: 'value',
    displayfield: 'text',
    readonly:true
  })),
  renderer: function(value){
    return combodata[value][1];
  }
}

datefield

{
  header:'date',
  dataindex:'date',
  editor:new ext.grid.grideditor(new ext.form.datefield({
    format: 'y-m-d',
    minvalue: '2011-07-24',
    disableddays: [0, 6],
    disableddaystext: '选择周一到周六之间的日期'
  })),
  renderer: function(value) {
    return value.format("y-m-d");
  }
}

属性表格控件propertygrid的使用
是在editorgrid的基础上开发的更智能的高级表格组件

var grid = new ext.grid.propertygrid({
  title: '属性表格控件propertygrid',
  autoheight: true,
  width: 400,
  renderto: 'grid',
  viewconfig: {
    forcefit: true
  },
  source: {
    "string": "string",
    "date": new date(date.parse('07/24/2011')),
    "boolean": false,
    "float": .01
  }
});

禁用propertygrid编辑功能的方法

grid.on('beforeedit', function(e){
 e.cancel = true;
 return false;
});

根据表格的name获取value

grid.store.getbyid('jason').get(value);

extjs中实现嵌套表格
先看效果：

2016521104833438.jpg (433×300)

代码如下：

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="lib/extjs/2_2/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/2_2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/extjs/2_2/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/extjs/2_2/source/locale/ext-lang-zh_cn.js"></script>
<script type="text/javascript" src="lib/extjs/plus/rowexpander.js"></script>
<script type="text/javascript">
ext.onready(function(){
var testdata=[
  ["lugreen","男",26,[["数学",100],["语文",150]]]
  ,["lisi","男",25,[["数学",100],["语文",150]]]
  ,["zhangsan","男",27,[["数学",120],["语文",158]]]  
];
//
storetest= new ext.data.simplestore({
  fields: ["name","sex","age","grade"]
  ,data: testdata
});
var expander = new ext.grid.rowexpander({
    tpl : new ext.xtemplate(
    '<div class="detaildata">',
    '',
    '</div>'
    )
    });
expander.on("expand",function(expander,r,body,rowindex){
 //查找 grid 
 window.testele=body;
 //alert(body.id);
 if (ext.domquery.select("div.x-panel-bwrap",body).length==0){
   //alert("a");
   var data=r.json[3];
   var store=new ext.data.simplestore({
      fields: ["class","degrade"]
      ,data:data
     });
   var cm = new ext.grid.columnmodel([
   {header: "科目",dataindex: 'class',width: 130,hideable:false,sortable:false,resizable:true}
   ,{header: "成绩",dataindex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true}
   ]);
   ext.domquery.select("div.detaildata")[0];
 var grid = new ext.grid.gridpanel(
 {
  store:store,
  cm:cm,
  renderto:ext.domquery.select("div.detaildata",body)[0],
  autowidth:true,
  autoheight:true
  }
 );
 
 }
});
//var sm=new ext.grid.checkboxselectionmodel({singleselect:true});
  var cm = new ext.grid.columnmodel([
  expander
  ,{header: "姓名",dataindex: 'name',width: 50,hideable:false,sortable:false}
  ,{header: "性别",dataindex: 'sex',width: 130,hideable:false,sortable:false,resizable:true}
  ,{header: "年龄",dataindex: 'age',width: 130,hideable:false,sortable:false,resizable:true}
  ]);
 var grid = new ext.grid.gridpanel(
 {
  id:'testgrid',
  store:storetest,
  cm:cm,
  renderto:"grid1",
  width:780,
  autoheight:false,
  height:300,
  listeners:{},
   plugins:[expander]
  }
  );
});
</script>
<style type="text/css">
#div2 h2 {
  font-weight:200;
  font-size:12px;
}
.c1 h2 {
  font-weight:200;
}
</style>
</head>
<body>
<div id="grid1">
 
</div>
<div id="grid2">
 
</div>
</body>
</html>

其中使用到的"rowexpander.js"为extjs官方示例中自带的。

实现这个嵌套表格要注意两点技巧：
1.提供给外层表格的datastore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。

var testdata=[
  ["lugreen","男",26,[["数学",100],["语文",150]]]
  ,["lisi","男",25,[["数学",100],["语文",150]]]
  ,["zhangsan","男",27,[["数学",120],["语文",158]]]  
];

使用数组集中record对象的json属性来获取以细节区数据

var data=r.json[3];

2.在rowexpander的 expand事件中添加嵌套表格.

JavaScript的ExtJS框架中表格的编写教程

2024年05月15日 • ExtJs •我要评论

相关文章:

发表评论


验证码：