ExtJS4.2学习(11)可拖放的表格

单纯的数据展示是不是太单调了？来，这次咱来个互动性强的，表格的行、列可随意拖放，不仅如此，还可以多个表格之间随意拖动。
先来看下第一个例子，通过拖放改变表格大小：

主要代码，其实之前的代码并不需要改变多少，只需要加入以下代码即可：

var columns = [ 
      {header:'编号',dataIndex:'id'}, 
      {header:'名称',dataIndex:'name'}, 
      {header:'描述',dataIndex:'descn'} 
  ]; 
      
  var data = [ 
      ['1','name1','descn1'], 
      ['2','name2','descn2'], 
      ['3','name3','descn3'], 
      ['4','name4','descn4'], 
      ['5','name5','descn5'] 
  ]; 
      
  var store = new Ext.data.ArrayStore({ 
data: data, 
fields: [ 
          {name: 'id'}, 
          {name: 'name'}, 
          {name: 'descn'} 
      ] 
  }); 
  store.load(); 
      
  var grid = new Ext.grid.GridPanel({ 
      renderTo: 'grid', 
      store: store, 
      columns: columns 
  });

上效果图：

好了，本章到此结束，下章开始讲扩展插件，等所有扩展插件讲完，表格控件就到此结束了，你也来动手试试吧。
连载中，请大家持续关注，本文出自我的个人网站 思考者日记网

转载于:https://blog.51cto.com/shuyangyang/1340106