位置: 编程技术 - 正文

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日期选择框)

  • 税务申报差额征收 服务减除清单
  • 营业额和合同额的区别
  • 直接计入当期损益的利得和损失,是指( )的利得或损失
  • 自产货物用于本企业在建工程交增值税不
  • 差额征税怎么交税
  • 变更注册资本的股东会决议范本
  • 下列应税项目中,不按次计算征收个人所得税的是
  • 银行利息回单怎么打印
  • 开出增值税普通发票需要交税吗
  • 企业所得税收入大于增值税收入的原因
  • 公司法人往对公账户存钱
  • 业务人员出差住宿费记什么科目
  • 税务小规模定律是什么意思
  • 建筑行业劳务费会计分录
  • 最优五种个人捐赠方式税务比较?
  • 政策性搬迁税收政策指引
  • 所得税工资账载怎么算
  • 提高并购成本
  • 个人承担的社保费有哪些
  • 适用增值税简易计税的项目
  • 研发支出是否可以抵税
  • 坏账计提方法和比例
  • 虚增成本调增还会被处罚吗
  • 如何调整任务栏图标大小
  • 政府性基金收入来源
  • win10商店在哪打开
  • 货物价格如何确定
  • 付的押金冲抵部分怎么算
  • 无形资产初始计量的表述
  • Olehelp.exe - Olehelp是什么进程 有什么用
  • php实现的任意进程函数
  • 准予在企业所得税税前扣除的有
  • laravel 日志配置
  • 珊瑚礁区域常有的鱼类
  • laravel5.4生成验证码的实例讲解
  • 小程序uniapp怎么用
  • 餐饮费是业务招待费还是差旅费
  • pytorch怎么入门
  • dns configuration
  • 行政事业单位固定资产划拨账务处理
  • 企业盈利不交所得税的办法
  • 公司没有人需要申报个税吗
  • 选择mysql数据库为当前数据库
  • mongodb集群启动顺序
  • sqlserver怎么用
  • 电子税务局如何增加税种认定
  • 销售货物应税劳务清单怎么填
  • 电算化会计档案论文答辩自述稿
  • 应付职工薪酬余额方向
  • 拆迁补偿款收税吗
  • 现金发放工资有什么风险
  • 社保月费基数
  • 母子公司可以合并吗
  • mysql太慢
  • sqlserver索引类型区别
  • 数据库分页存储方法
  • 通过修改注册表激活win7
  • 关闭空闲的ide通知怎么写
  • explorer.exe进程在哪
  • win8系统如何关闭杀毒系统
  • 如何解决windows无法连接到打印机
  • osx怎么用
  • 进程lsass.exe
  • win8.1系统安装教程
  • VirtualBox安装64位系统报错的处理方法
  • win7系统玩游戏怎么样
  • cocos2dx4.0入门
  • Javascript 事件冒泡机制详细介绍
  • vue自定义过滤器的语法
  • javascript的核心语言对象包括
  • 批处理实例
  • unity游戏开发的技术
  • jQuery获取checkbox选中的值
  • javascript超链接的onclick
  • Python中断言语句
  • 福建国税电子税务局app
  • 国税开票二维码图片
  • 杭州电子税务局怎么添加办税员
  • 新疆税务总局网站官网
  • 1950土地改革后土地所有权
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设