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

简介:

单纯的数据展示是不是太单调了?来,这次咱来个互动性强的,表格的行、列可随意拖放,不仅如此,还可以多个表格之间随意拖动。
先来看下第一个例子,通过拖放改变表格大小:
3924a9c37b17e292912570c8b00fefbf.jpg
主要代码,其实之前的代码并不需要改变多少,只需要加入以下代码即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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
   });

上效果图:
65e435112293263ff8ca7faaf75b072b.jpg
好了,本章到此结束,下章开始讲扩展插件,等所有扩展插件讲完,表格控件就到此结束了,你也来动手试试吧。


本文转自shyy8712872 51CTO博客,原文链接:http://blog.51cto.com/shuyangyang/1340106,如需转载请自行联系原作者

相关文章
|
Web App开发 JavaScript
ExtJS学习(四)EditorGrid可编辑表格
操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态。这个时候怎么办呢,看具体的实现吧。
1493 0
|
JavaScript 前端开发 Java
ExtJS4.2学习(五)表格渲染与复选框
 前几章做的例子,你有没有发现太单调啦?呵呵,相信聪明的你一定知道,光显示文字,那这功能太弱爆了吧,现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。
909 0
|
4月前
|
JavaScript
extjs表格行拖动插件
extjs表格行拖动插件
55 3
|
前端开发 JavaScript
extjs 配置与表格使用
引用 :http://www.jb51.net/article/20027.htm http://wenku.baidu.com/view/226ce70cba1aa8114431d9bf.html 中文网站:http://extjs.
1158 0
|
数据安全/隐私保护
ApeForms | WinForm窗体UI美化库(Metro扁平风格)演示与安装
ApeForms是一套基于WinForm框架免费的UI库,提供了丰富的Metro风格控件、针对WinForm开发中常见类型的扩展、通用Dialog/Notification的模板等。
502 0

热门文章

最新文章