位置: 编程技术 - 正文

JavaScript的Ext JS框架中的GridPanel组件使用指南

编辑:rootadmin

推荐整理分享JavaScript的Ext JS框架中的GridPanel组件使用指南,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

1 最简单的Grid PanelGrid Panel是ExtJS的核心部分之一,通过Grid Panel可以对数据显示、排序、分组和编辑。Model和Store是Grid Panel处理数据的核心,每个Grid Panel都必须设置Model和Store。要创建Grid Panel,首先要定义Model,Model包括了Grid Panel所有需要显示的字段,相当于数据库中表字段的集合。Store可以看作是一行数据的集合或者是Model的实例集合,每个Store都包含一个或多个Model实例,Grid Panel显示的数据都存储在Store里面。Grid Panel通过Store获取数据并显示,Store则通过Proxy对数据进行读取和保存。下面创建一个Grid Panel用来显示用户的基本信息,包括用户名、邮箱、手机号(name、email、phone),首先创建用户模型(User Model)。

接下来创建Store,Store是User的集合,包括多个User实例。

Model和Store都创建好之后,就可以创建Grid Panel了。

最后创建的用户Grid Panel如图所示。

2 Grid Panel数据分组(Grouping)只要在Store中设置groupField属性,就可以对Grid Panel显示的数据进行分组。假设公司有很多员工,需要对公司的员工在Grid Panel中按部门进行分组显示。首先在Store中设置groupField属性为department。

然后在Grid Panel中添加grouping Feature,实现分组显示效果。

分组显示效果如下图所示,点击这里查看官方分组显示代码。

3 Grid Panel分页显示当数据比较多一页显示不完的时候,就需要对数据进行分页显示。Grid Panel可以通过Paging Toolbar和Paging Scroller两种方式实现分页显示显示,Paging Toolbar有上一页/下一页按钮,Paging Scroller是当Grid Panel滚动显示到底部的时候动态加载数据。要实现分页显示,首先要设置Store支持分页,在Store中设置pageSize,pageSize默认是。在reader中设置数据总数量totalProperty,分页插件根据pageSize和totalProperty进行分页。下面的代码pageSize设置为4,totalProperty则从返回的json数据中total属性获取。

假设json数据格式如下

JavaScript的Ext JS框架中的GridPanel组件使用指南

Store的分页已经设置完毕,下面在Grid Panel中实现Paging Toolbar分页功能。

Paging Toolbar的分页效果如下图所示,点击这里查看官方Paging Toolbar分页功能代码。

Paging Scroller的分页实现比较简单,只要在Grid Panel中设置如下代码即可,点击这里查看官方Paging Scroller分页功能代码。

4 Grid Panel添加Checkbox只要设置Grid Panel的selModel属性为Ext.selection.CheckboxModel,点击这里查看官方代码实例。

5 综合示例

(1)获取数据 :单行

或者

多行

(2)删除数据 :

(3)查询

(4)添加一行列 :Ext自己带的一个插件 需要文件 RowExpander.js

在grid的columns中加 expand, 并在grid属性中加 plugins: expand

Ext JS框架中日期函数的用法及日期选择控件的实现 Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScriptDate的功能,下面列出一些常用的功能。基本函数:Ext.Date.add(date,interval,value)给date增加或减

Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享 在Extjs开发中,我们需要屏蔽一些键盘按键,来避免用户在使用键盘操作的过程中不小心按到这些快捷键造成输入信息丢失等问题.Ext.onReady(function(){Ext.Window

ExtJS 4.2 Grid组件单元格合并的方法 ExtJS4.2Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。目录1.原理2.多列合并3.代码与在线演示1.原理1.1HTML代码分析首先创建一个Grid组

标签: JavaScript的Ext JS框架中的GridPanel组件使用指南

本文链接地址:https://www.jiuchutong.com/biancheng/368500.html 转载请保留说明!

上一篇:JavaScript的ExtJS框架中数面板TreePanel的使用实例解析(js 编辑框)

下一篇:Ext JS框架中日期函数的用法及日期选择控件的实现(js日期选择框)

  • 发生无偿赠与行为怎么办
  • 注销库存股为什么股本减少
  • 二手房交易需缴纳的费用
  • 减免增值税计入其他收益
  • 电力工程服务费计入什么科目
  • 什么情况下做暂估
  • 公司名称变更发票还能认证吗
  • 收取不合规发票怎么处理
  • 职工集资建房款属公款吗
  • 税收实体法要素中的基础性要素
  • 捆绑销售行为怎么纳税
  • 营改增后转让土地使用权增值税
  • 购买沙子违法吗
  • 基建账的年终结转
  • 凭证工本费的账务处理
  • 2018年债券基金
  • 员工社保异地缴纳
  • 学校管理费是什么意思
  • 零申报有期限吗
  • 个人承包是什么意思
  • 贷款减值损失的计提规则
  • 购入生产车间
  • 年终奖扣税标准计算器
  • 新注册公司什么时候报个税
  • 销售收入增加会导致哪些变动
  • 公益事业捐赠
  • 新版edge浏览器兼容性视图怎么设置
  • win7取消共享文件夹
  • 小规模防伪税控服务费280元
  • 出口暂定关税
  • php在apache中有哪些工作方式
  • smartypig
  • 咨询服务费怎么报印花税
  • 进程核心栈
  • 社保退休金计算方法
  • PHP:oci_cancel()的用法_Oracle函数
  • 其他应收款年末怎么处理
  • php异步处理方案
  • 大西洋跟太平洋有没有融为一体?
  • 应付职工薪酬资产还是负债
  • 汽车客运补充车道标志
  • 财务费用为什么流向债权人
  • php教程从入门到精通
  • 收到银行结息收据3
  • 扶贫资金入股问题
  • 自产货物进项税抵扣
  • 搜索站内内容
  • 企业费用发票有哪些可以入账
  • 乡村道路属于城市道路吗
  • 汇算清缴时资产折旧怎么填
  • 现金日记账的登记证据有
  • 私车公用产生的费用如何入账
  • 预付账款和应付账款的区别与联系
  • 员工备用金会计分录
  • 商贸企业发出商品怎么确认收入
  • 现金存入银行是什么凭证
  • 开票系统维护费怎么做账
  • 一般纳税人主表中的25是怎么来的
  • 什么时候用以前年度损益调整科目什么时候用所得税科目
  • 查账征收的个体户怎么交个税
  • 会计记账凭证样本
  • sql server 数据库日志不可用
  • mysql 5.7.13 winx64安装配置教程
  • MySQL利用命令行工具启动和关闭的命令是什么
  • 用sql语句实现分页效果
  • 隐藏的系统应用在哪找
  • spools.exe - spools是什么进程 有何作用
  • linux系统中命令什么大小写
  • win7pxe-mof:exiting pxe rom
  • win10系统激活后怎么关闭
  • win10无法安装无线显示器
  • javascript 代码
  • 面向对象的程序设计语言是
  • Android自定义动画
  • 水产品 免税
  • 出口退税是哪个环节交的
  • 武汉税务地区编号是多少
  • 环保税申报操作手册
  • 西安医疗保险官网
  • 2020年山东录取人数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设