位置: 编程技术 - 正文

JavaScript的ExtJS框架中表格的编写教程(js explode)

编辑:rootadmin

推荐整理分享JavaScript的ExtJS框架中表格的编写教程(js explode),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js 边框,js 表格框架,js 编辑框,js框选,js框选,js框选,js 编辑框,js 表格框架,内容如对您有帮助,希望把文章链接给更多的朋友!

ExtJS中表格的特性简介表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种:

JsonStore,SimpleStore,GroupingStore…

一个表格的基本编写过程:

1、创建表格列模型

2、创建数据数组

3、创建一个数据存储对象store,包含两部分:proxy,获取数据的方式;reader,解析数据的方式

ArrayReader的mapping用来设置列的排列顺序

4、创建GridPanel,装配ColumnModel和store

另外获取远程数据可以使用ScriptTagProxy,如下所示

表格的常用属性功能

渲染表格,为表格设置特殊样式只需要在cm里面增加一个renderer属性,添加一个自定义函数来渲染传进来(由EXT自动传递)的参数的样式即可,即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。

自动显示行号,只要在创建cm时创建一个RowNumberer就可以了

删除列

刷新表格

为表格添加复选框需要使用CheckboxSelectionModelSelectionModel sm在使用时要放到cm和表格中

通过RowSelectionModel设置只选择一行:

使用选择模型获取数据

表格视图从MVC的思想来看表格控件:* Ext.data.Store可看做模型* Ext.grid.GridPanel可看做控制器* Ext.grid.GridView可看做视图* 一般GridView由GridPanell自动生成,如果想设置GridView的属性时,可以通过Ext.grid.GridPanel的getView()获得视图实例

使用GridPanel的viewConfig在创建表格时设置GridView的初始化参数

为表格添加分页工具条* 可以使用GridPanel的bbar属性,并创建Ext.PagingToolbar分页工具条对象* 注意,如果配置了分页工具条,store.load()就必须在构造表格以后执行。

从后台脚本获取分页数据

使用HttpProxy传递请求,获取服务器的JSON数据,交给JsonReader解析

如果想让分页工具条显示在表格的顶部,可以使用GridPanel的tbar属性设置添加工具条

让ExtJS在对返回的数据进行分页

* 需要在页面中引入examples/locale目录下的PagingMemoryProxy.js文件* 再使用PagingMemoryProxy设置代理

JavaScript的ExtJS框架中表格的编写教程(js explode)

可编辑表格控件EditorGrid的使用

制作一个简单的EditorGrid的步骤:

1、定义列ColumnModel,在里面添加editor属性

2、准备一个数组

3、创建Ext.data.Store,设置内存代理,设置ArrayReader解析数组

4、加载数据,创建EditorGridPanel

为可编辑表格添加和删除数据

1、使用Record的create方法创建一个记录集MyRecord,MyRecord相当于一个类

2、创建EditorGridPanel面板,在属性tbar中创建Ext.Toolbar

为可编辑表格保存修改的结果

在上面例子的基础之上,添加一个保存按钮

另外store可以设置属性pruneModifiedRecords: true。这样,每次remove或load操作时store会自动清除modified标记,可以避免出现下次提交时还会把上次那些modified信息都带上的现象。

限制表格输入的数据类型

NumberField

ComboBox

DateField

属性表格控件PropertyGrid的使用是在EditorGrid的基础上开发的更智能的高级表格组件

禁用PropertyGrid编辑功能的方法

根据表格的name获取value

ExtJS中实现嵌套表格先看效果:

代码如下:

其中使用到的"RowExpander.js"为extjs官方示例中自带的。

实现这个嵌套表格要注意两点技巧:1.提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。

使用数组集中record对象的json属性来获取以细节区数据

2.在rowExpander的 expand事件中添加嵌套表格.

JavaScript的ExtJS框架中数面板TreePanel的使用实例解析 在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树节点,由Ext.tree.Tr

JavaScript的Ext JS框架中的GridPanel组件使用指南 1最简单的GridPanelGridPanel是ExtJS的核心部分之一,通过GridPanel可以对数据显示、排序、分组和编辑。Model和Store是GridPanel处理数据的核心,每个GridPanel都必

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

标签: js explode

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

上一篇:Extjs4.0 ComboBox如何实现三级联动

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

  • 停车位划线套什么定额
  • 会计准则折旧年限规定最新
  • 合并报表存货增值如何做账
  • 有金额的框架协议要交印花税吗
  • 进项都抵扣完了怎么办
  • 返利销售增值税
  • 给客户多开了发票,下月少开可以吗?
  • 认缴注册资本的风险
  • 建筑公司成本发票不够
  • 对外投资所得税计算公式
  • 商业汇票的存款期限
  • 股息收入所得税率
  • 社保基金会割肉操作吗
  • 消费税征收项目
  • 没收逾期未退包装物押金收益,应计入( )科目
  • 车辆保险费包括
  • 权益资本成本率计算
  • 固定资产之前没提折旧,数额交大
  • 单位发生的业务怎么做账
  • 没有计提坏账准备的应收帐款坏帐帐务处理
  • 忘记申报印花税,但是公司已经注销了怎么办
  • 2017年广告费税率
  • 酒店的床和沙发哪个好
  • 现金福利需要发票吗
  • 企业亏损减资的会计处理
  • 苹果手机发票要验证码吗
  • 酒店客房收入怎么算
  • 附加税的税率是什么
  • 公司租赁的办公室装修费用可以抵进项税吗
  • 控制上网速度的软件
  • 发票备注栏的填写规定
  • 土地增值税清算的条件
  • 项目融资中风险有哪些
  • pkjobs.exe - pkjobs是什么进程 有什么用
  • 代扣代缴个人所得税手续费返还 增值税
  • 会计政策变更对财务分析的影响
  • 建筑业挂靠工程会计与税务处理怎么做?
  • 前端框架三大框架
  • pyqt5如何安装
  • 微信公众号开发淘宝客
  • 场外期权怎么交税
  • 代扣代缴应付职工薪酬账务处理
  • 企业提取盈余公积的比例
  • js中同步如何理解
  • mysql常见操作
  • 事业单位成本核算具体指引—公立医院
  • 电子口岸无纸化报关
  • access日期时间格式怎么修改
  • sqlserver 存储过程 临时表
  • 购销合同印花税税率
  • 个人所得税手续费奖励办税人员文件
  • 消费税计税分录
  • 房地产项目公司组织架构
  • 企业资金占用费利率
  • 因质量问题对方直接扣款也不开票
  • 退休人员在企业工作工资怎么算
  • 小规模企业发票税率是多少
  • 投资收益的主要来源有
  • 应交税费科目账务处理
  • 在途物资材料采购原材料的区别
  • mysql删除重复字段
  • .exe是什么文件
  • ubuntu命令联网
  • win8c盘
  • 如何提升windows版本
  • redhat linux8
  • win7系统检测
  • 在linux系统中,用来存放各种配置文件的目录
  • cocos2dx游戏开发进阶卷这本书怎么样
  • html用div来写表格
  • 什么是碰撞检测
  • jQuery用FormData实现文件上传的方法
  • jquery的认识和使用
  • jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
  • jQuery实现ajax的叠加和停止(终止ajax请求)
  • 不错的二本院校有哪些
  • 陕西省电子税务局官网登录入口网址
  • 国家税务局公告2021年第3号
  • 运输装卸费属于增值税价外费用吗
  • 生育保险证明去哪里办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设