大纲：

1.首先，搭建起来一个最基础的Grid组件；

2.其次，利用前边MVC架构将代码重构；

3.再者，介绍下Grid的一些特性。

一、搭建基础的Grid组件

在文章的开始，我们首先简单的搭建一个Grid项目，感受下Grid的样子和其吸引众人的魅力所在。

架构如图：

代码分别如下，注释写的比较清楚，按照以上搭建可以正常运行：

grid.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EXTJS4.0</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="mode.js"></script>
<script type="text/javascript" src="01gridDemo.js"></script>
</head>
<body>
<div id="gridDemo"></div>
</body>
</html>

gridDemo.js代码如下：

(function(){Ext.onReady(function(){//初始化Ext.QuickTips.init();//类似于title，用于显示ext:qtip设定的值//创建表格时候要 用表格的面板var grid = Ext.create("Ext.grid.Panel",{title : 'Grid Demo',//标题frame : true,//面板渲染，使表格更加饱满//forceFit : true,//自动填充panel空白处width : 600,height: 280,columns : [ //列模式{text:"Name",dataIndex:'name',width:100},//text列名，表头信息{text:"age",dataIndex:'age',width:100},//dataIndex从store/model中找到相应的记录{text:"email",dataIndex:'email',width:350,//重构列模式field:{xtype:'textfield',//编辑方式allowBlank:false//}}],tbar :[{xtype:'button',text:'添加',iconCls:'table_add'},//这个地方iconCls是一些图标组件，大家可以自行添加{xtype:'button',text:'删除',iconCls:'table_remove',handler:function(o){//var gird = o.findParentByType("gridpanel");var gird = o.ownerCt.ownerCt;//ownerCt是拥有这个组件的组件var data = gird.getSelectionModel().getSelection();//getSelectionModel得到Ext.selection.Model对象，得到选择模式//Ext.selection.Model中有getSelection方法得到选中对象的数组if(data.length == 0){Ext.Msg.alert("提示","您最少要选择一条数据");}else{//1.先得到ID的数据(name)var st = gird.getStore();//得到storevar ids = [];Ext.Array.each(data,function(record){ids.push(record.get('name'));})//2.后台操作(delete)Ext.Ajax.request({url:'/extjs/extjs!deleteData.action',params:{ids:ids.join(",")},method:'POST',timeout:2000,//延迟显示success:function(response,opts){Ext.Array.each(data,function(record){st.remove(record);})}})//3.前端操作DOM进行删除(ExtJs)}}},{xtype:'button',text:'修改',iconCls:'table_edit'},{xtype:'button',text:'查看',iconCls:'table_comm'}],dockedItems :[{//控制组件在什么位置，随便定位xtype:'pagingtoolbar',//分页组件store:Ext.data.StoreManager.lookup('s_user'),//分页也跟数据、挂钩dock:'bottom',//位置displayInfo:true}],plugins:[//Ext 4.0用的是 插件的形式来和form表单配合使用的Ext.create("Ext.grid.plugin.CellEditing",{clicksToEdit : 1})],selType:'checkboxmodel',//设定选择模式，前边会加选择框multiSelect:true,//运行多选renderTo :'gridDemo',//把这个组件渲染到一个div上store : Ext.data.StoreManager.lookup('s_user')//通过StoreManager读取数据});});
})();

mode.js代码如下：

//User类，创立一个模型类
Ext.define("user",{extend:"Ext.data.Model",fields:[{name:'name',type:'string',sortable:true},{name:'age',type:'int',sortable:true},{name:'email',type:'string',sortable:true}]
});
//User对象
var user = Ext.create("user",{});
Ext.create("Ext.data.Store",{model:'user',//这个地方user不是一个对象，而是一个类storeId:'s_user',//写了以后就可以把store用StroeManager进行管理proxy:{//代理type:'ajax',url:'获取数据的url，后台请大家自己实现',reader:{//读取器type:'json',//类型root:'topics'//根节点},writer:{type:'json'}},autoLoad:true
});

二、利用MVC架构将以上代码重构

代码在项目中的组织架构如下图，有图有真相啊：

grid.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>EXTJS4.0</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="gridDemo"></div>
</body>
</html>

app.js代码如下：

//application会初始化面板
Ext.onReady(function(){//Ext初始化Ext.QuickTips.init();//Ext规范，HTML只会加载一个类，就是Application这个类//启用LoaderExt.Loader.setConfig({enabled:true});Ext.application({//初始化一个应用name : 'AM',//应用的名字appFolder : "app",//应用的目录launch:function(){//当前页面加载完成执行的函数Ext.create('Ext.container.Viewport', { //简单创建一个视图layout:'auto',//自动填充布局items: {xtype: 'userlist',//要初始化哪个面板，将userlist展示出来title: 'Users',html : 'List of users will go here'}});},controllers:[//控制器'Users']});
})

controller下User.js代码如下：

//controller层目的一：将Model层和View层相融合
//controller层目的二：控制View层相应的事件触发
Ext.define('AM.controller.Users', {extend: 'Ext.app.Controller',init:function(){//初始化的方法this.control({//controller的核心方法'userlist button[id=delete]':{click:function(o){var gird = o.ownerCt.ownerCt;var data = gird.getSelectionModel().getSelection();if(data.length == 0){Ext.Msg.alert("提示","您最少要选择一条数据");}else{//1.先得到ID的数据(name)var st = gird.getStore();var ids = [];Ext.Array.each(data,function(record){ids.push(record.get('name'));})//2.后台操作(delet)Ext.Ajax.request({url:'/extjs/extjs!deleteData.action',params:{ids:ids.join(",")},method:'POST',timeout:2000,success:function(response,opts){Ext.Array.each(data,function(record){st.remove(record);})}})//3.前端操作DOM进行删除(ExtJs)}}}});},views:['List'],stores :["Users"],models :["User"]
});

model下User.js代码如下：

//Model层中的User，相当于java中的Class 就是java中的类
//User类
Ext.define('AM.model.User', {extend: 'Ext.data.Model',fields: [{name: 'name',  type: 'string',sortable : true},{name: 'age',   type: 'int',sortable : true},{name: 'email',   type: 'string',sortable : true}]
});

store下Users.js代码如下：

//Model 2 代表数据集合
//User数据集合
Ext.define('AM.store.Users', {extend: 'Ext.data.Store',model: 'AM.model.User',storeId: 's_user',proxy:{type:'ajax',url:'/extjs/extjs!getUserList.action',reader: {type: 'json',root: 'topics'},writer:{type:'json'}},autoLoad: true //很关键
});

view下List.js代码如下：

Ext.define("AM.view.List",{extend:'Ext.grid.Panel',title : 'Grid Demo',//标题alias: 'widget.userlist',//别名frame : true,//面板渲染width : 600,height: 280,columns : [ //列模式{text:"Name",dataIndex:'name',width:100},{text:"age",dataIndex:'age',width:100},{text:"email",dataIndex:'email',width:350,field:{xtype:'textfield',allowBlank:false}}],tbar :[{xtype:'button',text:'添加',iconCls:'table_add'},{xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},{xtype:'button',text:'修改',iconCls:'table_edit'},{xtype:'button',text:'查看',iconCls:'table_comm'}],    dockedItems :[{xtype:'pagingtoolbar',store:'Users',dock:'bottom',displayInfo:true}],plugins:[Ext.create("Ext.grid.plugin.CellEditing",{clicksToEdit : 2})],selType:'checkboxmodel',//设定选择模式multiSelect:true,//运行多选store : 'Users',initComponent:function(){//用到继承，一般都会初始化这个函数this.callParent(arguments);}
});

三、Grid组件特性简介

1.列模式：

列模式的主类
Ext.grid.column.Action xtype: actioncolumn
在表格中渲染一组图标按钮,并且为他赋予某种功能
altText : String 设置应用image元素上的alt
handler : function(view,rowindex,collndex,item,e);
icon    : 图标资源地址
iconCls  : 图标样式
items   : 多个图标的数组   //在使用MVC的时候建议不要用  如果大家有好得放大请与uspcat联系 
function(o,item,rowIndex,colIndex ,e)
stopSelection : 设置是否单击选中不选中
2.把写到view的代码写到控制层
Ext.grid.column.Boolean xtype: booleancolumn
falseText,trueText
Ext.grid.column.Date xtype: datecolumn
format:'Y年m月的日'
Ext.grid.column.Number xtype: numbercolumn
format:'0,000'
Ext.grid.column.Template xtype: templatecolumn
xtype:'templatecolumn',
tpl :""

2.选择模式

选择模式的根类Ext.selection.Model
重要方法
1.1撤销选择 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
1.2得到选择的数据getSelection( ) : Array
1.3得到最后被选择数据getLastSelected( ) : void
1.4判断你指定的数据是否被选择上isSelected( Record/Number record ) : Boolean
1.5选择你指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void
keepExisting true保持已选则的,false重新选择
---------------------------------------------------------------------------------------------
隐藏了一个单元格的选择模式 selType: 'cellmodel'(从这发现的Ext.grid.plugin.CellEditing)
重要方法
2.1得到被选择的单元格getCurrentPosition() Object
Ext.JSON.encode()
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
2.2selectByPosition({"row":5,"column":6})
很实用选择你要特殊处理的数据
---------------------------------------------------------------------------------------------
Ext.selection.CheckboxModel 多选框选择器
重要方法
---------------------------------------------------------------------------------------------
Ext.selection.RowModel      rowmodel 行选择器
重要属性
3.1multiSelect 允许多选
3.2simpleSelect 单选选择功能
3.3enableKeyNav 允许使用键盘

3.Grid的特性Ext.grid.feature.Feature

Ext.grid.feature.RowBody  表格的行体
重要方法
1.1getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
1.如果你要展示这个面板那么必须复写这个方法
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData:function(data,idx,record,orig){
......
}
})
],
2.必须返回行体的对象
       var headerCt = this.view.headerCt,
           colspan  = headerCt.getColumnCount();
       return {
           rowBody: "",
           rowBodyCls: this.rowBodyCls,
           rowBodyColspan: colspan
       };
---------------------------------------------------------------------------------------------       
Ext.grid.feature.AbstractSummary
Ext.grid.feature.Summary
2.1实用方法是在
1.第一步
   features: [{
       ftype: 'summary'
   }],
2.第二步
columns中配置summaryType: 'count', (count,sum,min,max,average)
       summaryRenderer: function(value, summaryData, dataIndex) {
          return Ext.String.format(' : '+value); 
       }
---------------------------------------------------------------------------------------------       
Ext.grid.feature.Grouping
1.在store中设置可以分组的属性
groupField : ''
2.在view中增加代码
Ext.create("Ext.grid.feature.Grouping",{
groupByText : "职业分组",
groupHeaderTpl : "职业{name}  一共{rows.length}人",
showGroupsText : "展示分组",
startCollapsed : true//是否收起

}
重要事件
   groupclick
   groupdblclick
   groupcontextmenu
   groupexpand
   groupcollapse

4.可编辑插件

可编辑插件的根 Ext.grid.plugin.Editing
Ext.grid.plugin.Editing
Ext.grid.plugin.CellEditing  这个不讲(之前课程讲过)
(1)保存修改的两种办法
1.设立保存按钮,用户单击的时候保存数据
st.sync();
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
model.commit();
});
2.注册edit事件
e.record.commit();
Ext.grid.plugin.RowEditing
使用方法:(个人推荐4.0.1a版本还是不要用这个功能)
Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })

5.表格拖拽

Ext.grid.plugin.DragDrop 表格拖拽 //表格前端排序，首先不能有分页
//其次有index排序的字段 同时也有保存的效果了
//再者不能有多选框的功能
主意:配置有变化
viewConfig:{
plugins:[
       Ext.create('Ext.grid.plugin.DragDrop', {
        ddGroup:'ddTree', //拖放组的名称 //如果拖动和释放的组件在同一个拖放组中，就可以从一个拖到
//另一个中
           dragGroup :'userlist', //拖拽组名称
           dropGroup :'userlist'  //释放租名称
           enableDrag:true, //是否启用
           enableDrop:true
       })]
}
处理事件
listeners: {
        drop: function(node, data, dropRec, dropPosition) {
              var st = this.getStore();
              for(i=0;i<st.getCount();i++){
                  st.getAt(i).set('index',i+1);
              }
        }
    }

6.分页组件

Ext.toolbar.Paging 分页组件
    dockedItems: [{
    xtype: 'pagingtoolbar',
        store: store,
        dock: 'bottom',
        displayInfo: true
    }],
    //第二种分页的形式
    1.app.js中添加
Ext.Loader.setPath('Ext.ux', '../../../extjs4/examples/ux');
2.
Ext.require([
   'Ext.ux.data.PagingMemoryProxy',
   'Ext.ux.SlidingPager'
]);    
3. view中添加
    bbar: Ext.create('Ext.PagingToolbar', {
         pageSize: 10,
         store: store,
         displayInfo: true,
        plugins: Ext.create('Ext.ux.SlidingPager', {})  ---- 重点是这 //分页组件插件最下边
    })

转载于:https://www.cnblogs.com/sunyingyuan/p/3686240.html

ExtJS4.2学习(11)——高级组件之Grid相关推荐

  1. Android学习——UI高级组件三

    Android学习--UI高级组件三 PopupWindow(弹出式窗口) Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于:AlertDialog位置固 ...

  2. Ext JS 6学习文档-第6章-高级组件

    Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...

  3. ExtJS4.2学习(14)基于表格的扩展插件（2）

    我曾经在第6节里讲到表格分页,还记得之前的分页组件是什么样的吗? 上面只有文字显示,我们来为其制作的更美观点,好吧,不卖关子了,讲本节的内容:进度条分页控件,这是表格扩展组件. 首先我们需要引入扩展组 ...

  4. ExtJS4.2学习(9)——MVC

    对于Extjs来说,大客户端程序一直很难写,当你为大客户端程序添加更多的功能和项目的时候,项目的体积往往迅速增长.这样的大客户端程序很难组织和维持 ,所以,Extjs4配备了一个新的应用程序体系结构, ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  6. Mini 容器学习笔记4——组件的生命周期(应用篇)

    Mini容器支持6中生命周期类型: 1. Singleton :单利类型(缺省组件都是单利类型的生命周期,由容器进行托管的) [Test]public void SingletonLifestyleT ...

  7. Mini 容器学习笔记6——组件的获取(应用)

    1. 通过组件Id获取组件实例: [Test]public void GetByIdTest(){ServiceRegistry.Register<Person>("person ...

  8. 质量属性效用树例子_数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  9. eclipse java ui,Eclipse Forms筹划漂亮UI之高级组件[Java编程]

    赞助商链接 本文"Eclipse Forms筹划漂亮UI之高级组件[Java编程]"是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价 ...

最新文章

  1. 工业机器人演示码垛和卸垛_浅谈饲料自动码垛机的应用及正确操作方法
  2. python语言怎么输入-Python input()函数：获取用户输入的字符串
  3. Elasticsearch聚合查询案例分享
  4. 操作系统（十八）进程同步与进程互斥
  5. SpringSecurity案例之认证服务security配置
  6. JDBC学习笔记（1）
  7. 命名时取代基优先顺序_有机化学专题讲解——有机化合物的命名
  8. 《统计学习方法》—— 逻辑斯谛回归 与 最大熵模型 的介绍以及详细推导
  9. pdf php 添加元数据,PDF怎么添加/清除元数据-PDF添加/清除元数据的方法 - 河东软件园...
  10. PHP for windows iis6配置
  11. J1939协议简介【小白入门】
  12. jet-cp4005,linux双面打印,如何使用Linux(Ubuntu 13.04)在HP 7610上启用双面打印
  13. 微信小程序学习笔记4
  14. python case用法_Python Switch Case三种实现方法代码实例
  15. 关于【正点原子STM32F1开发指南】第五章delay.c文件里fac_us=SystemCoreClock/8000000的保姆级详解
  16. 微信服务器与客户端消息通讯机制,微信在部分地区发生连接故障，你遇到了么？...
  17. 电话号码正则表达式手机固话分机
  18. json和jsonp区别与讲解
  19. 怎么开发一个小程序？从零开始手把手教你
  20. 最新版树莓派3A+ 开箱简介

热门文章

  1. 【翻译】在Ext JS 6通用应用程序中使用既共享又特定于视图的代码
  2. Cocos2d-x3.2 EditBox的使用
  3. Asp.net发布的CheckList
  4. select null and select 1
  5. SQL基本操作（三）：存储过程和触发器
  6. nginx配置二级目录，反向代理不同ip+端口
  7. Linux目录详细说明
  8. dedecms自定义表单提交成功后提示信息修改和跳转链接修改
  9. JQuery------Select标签的各种使用方法
  10. 配置Voice vlan