zoukankan      html  css  js  c++  java

  • [转]ExtJS的使用方法汇总—配置和表格控件使用

    在网上差一些关于ExtJS的相关资料，看到这篇博客写的不错，拿出来分享一下！

    博客文章：ExtJS的使用方法汇总(1)——配置和表格控件使用
                  ExtJS的使用方法汇总(2)——表单与输入控件

    原文链接：http://blog.csdn.net/rocket5725/article/details/4535323

    第二篇博客：http://blog.csdn.net/rocket5725/article/details/4538843

    原文如下：

    ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库，所以非常有学习和使用价值，如果你还没有接触过ExtJS或者压根对其不感兴趣，那么没有必要看下去了,ExtJS是一套完整的RIA解决方案，也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现，对客户端机器性能也有一定的要求，即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制，或者客户端操作系统过于陈旧，一定不要选择ExtJS。

    本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0，但是本文主要介绍2.2版本。

    一、ExtJS下载以及配置

    1、下载地址：www.extjs.com/(这是官网，大家可以选择自己喜欢的版本下载)

    2、配置过程，假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码)，配置过程如下：

    (1) 新建一个页面文件Helloworld.html

    (2) 在<head>和</head>之间添加如下代码：

    [xhtml] view plaincopyprint?
    1. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />  
    2. <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>  
    3. <script type="text/javascript" src="../ext-all.js"></script>  
    4. <script type="text/javascript">  
    5.     Ext.onReady(function(){  
    6.         Ext.MessageBox.alert('HelloWorld','Hello World');  
    7.     })  
    8. </script>  

    (3) 这里注意<script></script>不能用</script>取代

    (4) js的导入顺序不要更改

    (3) 如果弹出一个HelloWorld的对话框，则代表配置成功。

    二、表格控件Grid的使用

    EXT中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。

    1、创建表格的列信息：

    [c-sharp] view plaincopyprint?
    1. var cm=new Ext.grid.ColumnModel([  
    2.      {header:'编号',dataIndex:'id'},  
    3.      {header:'名称',dataIndex:'name'},  
    4.      {header:'描述',dataIndex:'desn'}  
    5.  ]);  

    2、添加数据信息：

    [c-sharp] view plaincopyprint?
    1. var data=[  
    2.       ['1','name1','desn1'],  
    3.       ['2','name1','desn1'],  
    4.       ['3','name1','desn1'],  
    5.       ['4','name1','desn1'],  
    6.       ['5','name1','desn1']  
    7.   ];  

      

    3、创建数据存储对象：

    [c-sharp] view plaincopyprint?
    1. var ds=new Ext.data.Store({  
    2.       proxy:new Ext.data.MemoryProxy(data),  
    3.       reader:new Ext.data.ArrayReader({},[  
    4.           {name:'id'},  
    5.           {name:'name'},  
    6.           {name:'desn'}  
    7.       ])  
    8.   });  
    9.   ds.load();//这个相当的重要  

    4、表格的列模型定义好了，原始数据和数据的转换也已经完成，剩下的只需要把它们装配在一起，我们的Grid就创建成功了。

    [c-sharp] view plaincopyprint?
    1. var grid=new Ext.grid.GridPanel({  
    2.      renderTo:"grid",  
    3.      store: ds,  
    4.      height:600,  
    5.      cm:cm                  
    6.  });  

    5、注意：Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方，所以，在HTML里应该有一个<div id='grid'></div>与之对应。

    6、所有代码清单如下(已通过测试)：

    实验效果图如图1所示

    1

    图1 一个简单的Grid

    三、表格控件Grid的功能详解

    第二部分简单介绍了如何创建简单的Grid，本章将对Grid的功能进行详细的分析。

    3.1 部分属性功能

    1、默认情况下，Grid是可以拖放列，也可以改变列的宽度，如果要禁用这两个功能，在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可。

    2、如果希望显示斑马线效果，可以加上stripeRows:true

    3、Grid还支持一种读取数据时的遮罩和提示功能，设置属性loadMask:true,在store.load()完成之前一直会显示"Loading…"

    3.2 自主决定每列的宽度

    1、如果要定义宽度，只要设置该列的width属性即可，如下面的代码所示。效果图如图2所示。

    [c-sharp] view plaincopyprint?
    1. var cm=new Ext.grid.ColumnModel([  
    2.                 {header:'编号',dataIndex:'id',60},  
    3.                 {header:'名称',dataIndex:'name',180},  
    4.                 {header:'描述',dataIndex:'desn',200}  
    5.             ]);  

      

    2

    图2 自定义每列的宽度

    2、这样需要自己去计算每列的宽度，如果想让每列自动填满Grid,只需要viewConfig中的forceFit即可。使用forceFit后，Grid会根据你在cm里设置的width按比例分配，非常智能。实现代码如下：

    [c-sharp] view plaincopyprint?
    1. var grid=new Ext.grid.GridPanel({  
    2.                 renderTo:"grid",  
    3.                 stripeRows:true,//斑马线效果   
    4.                 loadMask:true,  
    5.                 store: ds,  
    6.                 height:600,  
    7.                 cm:cm,  
    8.                 viewConfig:{  
    9.                     forceFit:true  
    10.                 }                  
    11.             });   

    3、我们也可以考虑autoExpandColumn,它可以让指定列的宽度自动伸展，从而填充整个表格。代码如下

    [c-sharp] view plaincopyprint?
    1. var grid=new Ext.grid.GridPanel({  
    2.                 renderTo:"grid",  
    3.                 stripeRows:true,//斑马线效果   
    4.                 loadMask:true,  
    5.                 store: ds,  
    6.                 height:600,  
    7.                 cm:cm,  
    8.                 autoExpandColumn:'desn'  
    9. //                viewConfig:{   
    10. //                    forceFit:true   
    11. //                }                   
    12.             });   

    注意：autoExpandColum只能指定一列的id,注意，必须是id,原来我们设置的cm里面都没有id,现在为了使用autoExpandColumn,要给cm的desn设置id.于是在渲染时desn就可以自动延伸，否则会出错。

    [c-sharp] view plaincopyprint?
    1. var cm=new Ext.grid.ColumnModel([  
    2.                 {header:'编号',dataIndex:'id',60},  
    3.                 {header:'名称',dataIndex:'name',180},  
    4.                 {id:'desn',header:'描述',dataIndex:'desn',200}  
    5.             ]);  

    3.3 让Grid支持按列排序

    在EXT中可以很方便地实现排序功能，只需要在定义列模型时增加sortable属性，如下面代码所示：

    [c-sharp] view plaincopyprint?
    1. var cm=new Ext.grid.ColumnModel([  
    2.                 {header:'编号',dataIndex:'id',60,sortable:true},  
    3.                 {header:'名称',dataIndex:'name',180},  
    4.                 {id:'desn',header:'描述',dataIndex:'desn',200}  
    5.             ]);  

    效果图如图3所示

    3

    图3 按列排序效果

    3.4 显示时间类型数据

    尽管返回的JSON里都是数字和字符串，但是在EXT中我们同样可以从后台取得日期类型的数据，然后交给Grid进行格式化。

    1、首先定义一组数据，其中最后一列是日期格式的数据。

    [c-sharp] view plaincopyprint?
    1. var data=[  
    2.                 ['1','name1','desn1','2009-09-17T02:58:04'],  
    3.                 ['2','name2','desn1','2009-09-17T02:58:04'],  
    4.                 ['3','name3','desn1','2009-09-17T02:58:04'],  
    5.                 ['4','name4','desn1','2009-09-17T02:58:04'],  
    6.                 ['5','name5','desn1','2009-09-17T02:58:04']  
    7.             ];  

    2、接着我们在reader里面增加一行配置，除了设置name以外，还设置了type和dateFormat两个属性。代码如下：

    [c-sharp] view plaincopyprint?
    1. var store1= new Ext.data.Store({  
    2.                 proxy:new Ext.data.MemoryProxy(data),  
    3.                 reader:new Ext.data.ArrayReader({},[  
    4.                     {name:'id'},  
    5.                     {name:'name'},  
    6.                     {name:'desn'},  
    7.                     {name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}  
    8.                 ])  
    9.             });  

      

    3、同样的，我们还需要在cm里面增加一行配置：

    [c-sharp] view plaincopyprint?
    1. var cm=new Ext.grid.ColumnModel([  
    2.                 {header:'编号',dataIndex:'id',60,sortable:true},  
    3.                 {header:'名称',dataIndex:'name',180},  
    4.                 {id:'desn',header:'描述',dataIndex:'desn',200},  
    5.                 {header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
    6.             ]);  

    4、代码详细信息如下所示，效果图如图4所示。

      

    4

    图4 具有时间数据的Grid

    3.5 自动显示行号和复选框

    实际上，行号和复选框都是renderer的延伸。当然，复选框的功能要复杂得多。

    1、自动显示行号：修改列模型cm,加入RowNumberer对象；

    2、复选框：我们创建一个CheckboxSelectionModel()

    3、详细代码如下，效果图如图5所示

    [c-sharp] view plaincopyprint?
    1. var sm=new Ext.grid.CheckboxSelectionModel();  
    2.             var cm=new Ext.grid.ColumnModel([  
    3.                 new Ext.grid.RowNumberer(),  
    4.                 sm,  
    5.                 {header:'编号',dataIndex:'id',40,sortable:true},  
    6.                 {header:'名称',dataIndex:'name',180},  
    7.                 {id:'desn',header:'描述',dataIndex:'desn',200},  
    8.                 {header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
    9.             ]);  

    5

    图5 自动行号以及复选框效果图

    3.6 表格分页

    Grid控件对性能要求较高，如果在一个Grid里面显示上千条记录，效率会有明显下降，所以必须考虑分页问题。

    1、为Grid添加分页工具条：在前面代码的基础上修改grid代码：

    [c-sharp] view plaincopyprint?
    1. var grid1=new Ext.grid.GridPanel({  
    2.                 renderTo:"grid1",  
    3.                 stripeRows:true,//斑马线效果   
    4.                 loadMask:true,  
    5.                 store: store1,  
    6.                 height:200,  
    7.                 cm:cm,                  
    8.                 viewConfig:{  
    9.                     forceFit:true  
    10.                 },  
    11.                 bbar:new Ext.PagingToolbar({  
    12.                     pageSize:10,  
    13.                     store: store1,  
    14.                     displayInfo:true,  
    15.                     displayMsg:'显示第{0}条到{1}条记录,一共{2}条',  
    16.                     emptyMsg:"没有记录"  
    17.                 })                  
    18.             });  

    2、效果图如图6所示：

    6

    图6 添加分页工具条

    3、如果要真正实现分页，还需要通过后台脚本获得分页数据，这部分在此不再给出 

    四、可编辑表格控件——EditorGrid

    EditorGrid可以直接在表格里面执行添加、删除、修改、查找等功能，然后一次性保持。还有可以动态修改某个单元格，这些单元格我们先暂时不能为空，保存时会进行检测，为空就无法保存，验证信息会给予提示。

    4.1 制作一个简单的EditorGrid

    1、定义列，代码如下：

    [c-sharp] view plaincopyprint?
    1. var cm=new Ext.grid.ColumnModel([  
    2.                 {header:'编号',dataIndex:'id',40,editor:new Ext.grid.GridEditor(  
    3.                     new Ext.form.TextField({  
    4.                         allowBlank:false  
    5.                     })  
    6.                 )},  
    7.                 {header:'名称',dataIndex:'name',180,editor:new Ext.grid.GridEditor(  
    8.                     new Ext.form.TextField({  
    9.                         allowBlank:false  
    10.                     })  
    11.                 )},  
    12.                 {id:'desn',header:'描述',dataIndex:'desn',200},  
    13.                 {header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
    14.             ]);   

    2、定义grid,注意此时是EditorGridPanel.

    [c-sharp] view plaincopyprint?
    1. var grid1=new Ext.grid.EditorGridPanel({  
    2.                 renderTo:"grid1",  
    3.                 store: store1,  
    4.                 height:200,  
    5.                 clicksToEdit:1,  
    6.                 cm:cm           
    7.             });   

    3、默认情况下，需要双击单元格才能激活编辑器，从而进行修改，不过，也可以给Grid配置clickToEdit:1，这样就可以单击单元格激活编辑器，从而进行修改，如图7所示：

    7

    图7 通过单击修改单元格

    五、属性表格——PropertyGrid

    属性表格扩展自EditorGridPanel,所以可以直接编辑右边的内容，注意：只有右边的，即使你单击左边的单元格，编辑器也会出现在右边。

    定义的方法如下：

    [c-sharp] view plaincopyprint?
    1. <mce:script type="text/javascript"><!--  
    2.         Ext.onReady(function(){  
    3.             var grid=new Ext.grid.PropertyGrid({  
    4.                 title:"属性表格",  
    5.                 autoHeight:true,  
    6.                 400,  
    7.                 renderTo:'grid1',  
    8.                 source:{  
    9.                     "名字":"薛敬明",  
    10.                     "创建时间":new Date(Date.parse('12/15/2009')),  
    11.                     "是否有效":false,  
    12.                     "版本号":.01,  
    13.                     "描述":"估计没有啥说的"  
    14.                 }  
    15.             });   
    16.                      
    17.         });  
    18.       
    19. // --></mce:script>  

    效果图如图8所示：

    8

    图8 属性表格效果图

    六、分组表格——Group

    分组表格就是在普通表格的基础上，根据某一列的数据将表格中的数据分组显示的表格控件。

    1、首先定义一组数据

    [c-sharp] view plaincopyprint?
    1. var data=[  
    2.                 ['1','male','name1','desn1'],  
    3.                 ['2','male','name2','desn1'],  
    4.                 ['3','female','name3','desn1'],  
    5.                 ['4','male','name4','desn1'],  
    6.                 ['5','female','name5','desn1'],  
    7.                 ['6','male','name6','desn1'],  
    8.                 ['7','male','name7','desn1']  
    9.             ];  

    2、创建表格的列信息

    [c-sharp] view plaincopyprint?
    1. var sm=new Ext.grid.CheckboxSelectionModel();  
    2.             var cm=new Ext.grid.ColumnModel([  
    3.                 new Ext.grid.RowNumberer(),  
    4.                 sm,  
    5.                 {header:'编号',dataIndex:'id',40,sortable:true},  
    6.                 {header:'性别',dataIndex:'sex',180},  
    7.                 {header:'名称',dataIndex:'name',200},  
    8.                 {header:'描述',dataIndex:'desn',200}  
    9.             ]);    

    3、创建数据存储对象

    [c-sharp] view plaincopyprint?
    1. var store1= new Ext.data.GroupingStore({  
    2.                 proxy:new Ext.data.MemoryProxy(data),  
    3.                 reader:new Ext.data.ArrayReader({},[  
    4.                     {name:'id'},  
    5.                     {name:'sex'},  
    6.                     {name:'name'},  
    7.                     {name:'desn'}  
    8.                 ]),                  
    9.                 groupField:'sex',  
    10.                 sortInfo:{field:'id',direction:"ASC"}  
    11.             });   
    12.             store1.load();  

    4、设计分组设计表格

    [c-sharp] view plaincopyprint?
    1. var grid1=new Ext.grid.GridPanel({  
    2.                 store: store1,  
    3.                 height:300,  
    4.                 cm:cm,                  
    5.                 view:new Ext.grid.GroupingView(),  
    6.                 renderTo:"grid1"                
    7.             });  

    5、代码清单如下，效果图如图9所示。

    9

    图9 分组表格

    六、可拖放的表格

    首先我们看图10的效果图：

    10

    图10 可拖放的表格

    注意图10四周的蓝色细条，把鼠标放到上面，就可以用拖放改变表格的高度和宽度，实现这一效果并不难，也不需要对写好的Grid做大的修改，只要在原先的基础上添加如下代码：

    [c-sharp] view plaincopyprint?
    1. var rz=new Ext.Resizable('grid1',{  
    2.                 wrap:true,  
    3.                 minHeight:100,  
    4.                 pinned:true,  
    5.                 handles:'all'  
    6.             });  
    7.             rz.on('resize',grid1.syncSize,grid1);  

    注意：

    (1) Resizable必须放在render之后，否则就会出现问题；

    (2) handles:'all'代表可以向所有放心拖动表格 

    七、Grid与右键菜单

    Grid提供了四个与右键菜单相关的事件：

    （1） contextmenu:全局性的右键事件；

    （2）cellcontextmenu:单元格上的右键事件

    （3）rowcontextmenu:行上的右键事件

    （4）headercontextmenu:表头的右键事件

    以下代码我们实现一个行上的右键事件，代码清单如下，效果图如11所示

    [c-sharp] view plaincopyprint?
    1. var contextmenu=new Ext.menu.Menu({  
    2.                 id:'theContextMenu',  
    3.                 items:[{  
    4.                     text:'查看详情',  
    5.                     handler:function(){  
    6.                     }  
    7.                 }]  
    8.             });  
    9.             grid1.on("rowcontextmenu",function(grid,rowIndex,e){  
    10.                 e.preventDefault();  
    11.                 grid1.getSelectionModel().selectRow(rowIndex);  
    12.                 contextmenu.showAt(e.getXY());  
    13.             });   

    11

    图11 右键菜单

    *************************************************
    在测试功能时，注意ExtJS的版本，本文介绍的是2.2版本，我自己练习用的是3.4.0，在功能实现上对于属性、方法、事件的使用有很大的不同，如在3.4.0的版本中测试这些效果，第一个显示Grid的效果就无法实现，还是理解大概的逻辑，具体的调用还是查官方给的ExtJS的API文档最好。好像最新的版本是4.1.1。
    对于本文的处理：
    1. var grid=new Ext.grid.GridPanel({  
    2.      renderTo:"grid",  
    3.      store: ds,  
    4.      height:600,  
    5.      cm:cm                  
    6.  });  
    ******************
    var grid=new Ext.grid.GridPanel({
       renderTo:"grid",//rendTo属性指示将表格渲染到什么地方
       store:ds,   
       500,//限定宽度
       colModel:cm1,
       stripeRows:true,//斑马线效果
       loadMask:true,//读取数据遮罩和提示,Loading....
       enableColumnMove:false,//取消列的拖放
       enableColumnResize:false,//取消列的大小改变
       viewConfig:{
        forceFit:true//自动填满Grid,填满父容器"grid"的大小，
       }
      });
    其他的问题，跟着ExtJS API文档查吧！祝，大家编程愉快！
  • 相关阅读:
    #2020征文TV#【鸿蒙基地】鸿蒙从窗口开始：Page Ability诞生记
    设计器打开某表单时提示：[某某表单]已经由用户[xxx]打开需解锁
    有效性设置解疑
    表单打开时显示空白页面解决办法
    工作流_知会设置
    单元格中既有公式又可以录入数据，怎么实现？
    更改系统时间
    下拉框改变后，如何清空后面几个单元格的值？
    如何调整人员的部门？
    如何修改iis访问端口
  • 原文地址：https://www.cnblogs.com/SanMaoSpace/p/2644453.html
Copyright © 2011-2022 走看看