(Extjs)对于GridPanel的各种操作

刚才做了个有点特殊的需求,在某窗口关闭时,要把Gridpanel中的选择行清空,因为如果不清空,直接双击,就不能即时更新出来我想要的内容. 答案是:Grid.getSelectionModel().clearSelections(); 顺便,把Gridpanel的多种操作总结一下,它的帮助文档不给力啊. 1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:…

ExtJS：GridPanel之renderer:function()和itemdblclick : function()方法参数详解

要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: Ext.define("Gpsdata", { extend: "Ext.data.Model", fields: [ { name: 'gpstime', type: 'string' }, { name: 'gpstemp', type: 'string' } ] }); 然后创建Store: var surfacestore = new…

Extjs的GridPanel的RowExpander的扩展

对Extjs的grid使用,有时候单单使用其中的某些组.或某些行是远远不够的,还需要对行进行一些扩展,如:与filters相似的row扩展控件,如下这个控件,我也是从网上找的小例子,按照其内部的某些方法,结合自己的工程,应用到相应的文件中,其使用过程还算简单.一般的扩展只需要在行的内部添加些文字或者图片就可以了,我在使用的时候,在行的内部又嵌套了一个grid,达到了多级显示数据的效果,具体界面如下: 外面一层是一个groupGrid,内部为其行添加扩展控件内部嵌套grid,这样看起来很适合多级…

给Extjs的GridPanel增加“合计”行(转）

再Google,找到一个看似写的比较好的 http://www.cnblogs.com/over140/archive/2009/05/06/1449892.html 期间主要部分也是借鉴官方论坛上的东西,效果也很漂亮. 然后又看到一篇,提到了3个方法,并做了比较(http://www.cnblogs.com/over140/archive/2010/06/28/1766608.html) 而且,把之前提到的那一个归结为“很明显是最复杂的,基本可以被淘汰.” 而我确有不同的看法,我恰恰认为这种“…

ExtJs中的Grid具体操作(笔记及心得)

一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex:'id',sortable:true}, //header是表的首部显示文本.dataIndex是列对应的记录集字段,sortable表示列是否可排序,可能还会用到的参数:renderer列的渲染函数,format格式化信息 {header:'名称',dataIndex:'name'},{heade…

ExtJS学习-------Ext正确Dom操作：Ext.get Ext.fly Ext.getDom

详细实例: (1)创建JSP文件.引入CSS和js文件,加入三个Div <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSer…

ExtJs 设置GridPanel表格文本垂直居中

业务场景,需要实现最终效果图如下: GridPanel代码如下配置: { xtype : 'grid', id : 'grid_jglb', frame : true, region : 'center', title : '列表详细信息', columnLines : true, loadMask : true, store : 'test_store', viewConfig : { forceFit : true, scrollOffset : 0 }, anchor : '100%',…

Extjs的GridPanel分页前后台完整代码实例

第一次写文章啊,有些冲动.最近在公司学习Extjs,做了一个分页的小实例和大家分享. 1.首先编写paging-grid.js文件,这是我在网上参考的例子改写的,大同小异. Ext.onReady(function() { // Proxy var proxy = new Ext.data.HttpProxy({ url : "../../servlet/LoginServlet" }); // Record 定义记录结果 var Human = Ext.data.Record.cre…

ExtJs之gridPanel的属性表格，编辑表格，表格分页，分组等技巧

这里藏的配置确实多.. 慢慢实践吧. <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css"…

ExtJs中gridpanel分组后组名排序

/** * 定义降序的groupingStore */ var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : 'ASC', groupBy : function(field, forceRegroup, direction) { direction = direction ? (String(direction) .toUpperCase() == 'DESC' ? 'DESC' : 'ASC') : th…

Extjs中GridPanel的各个属性与方法

1.Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0 stripeRows:表格是否隔行换色,默认为false cm.colModel:表格的列模式,渲染表格时必须设置该配置项 sm.selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel enableHdMenu:…

对Extjs中store的多种操作

Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录. 除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示. 1. store.each(function(record) { 2. alert(record.get('name')); 3. }); Each()可以接受一个函数作为参数,遍历内部record,并将每个record作为参数传递给function()处理. 如果希…

68. 对Extjs中store的多种操作

转自:https://www.cnblogs.com/exmyth/archive/2013/05/16/3082045.html 先来个声明,看着不错,贴过来的,没都测试过. Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录. 除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示. 1. store.each(function(record) { 2. alert(recor…

Extjs, 使用GridPanel出现 Layout run failed

当GridPanel被加入到容器,且容器的layout为vbox时候, 会出现 Layout run failed 后者GridPanel的尺寸没有撑满父容器网上找到的解决的方法是.要给父容器设置一个高度,但问题是.高度没有办法定死. 切写死后,也没有解决此问题. 此时改动父容器的layout为 layout: { type: 'vbox', align: 'stretch' }, 然后GridPanel设置flex:1 能够解决此问题 ****************************…

Extjs给gridPanel添加单价双击事件和获取当前行的数据

有两个小属性,如下 this.on('rowdblclick', this.readContent, this); this.on('cellclick', this.gridCellClick, this); //第一个是单机双击事件,触发的事件,第二个是相应的方法,第三个是作用的范围 readContent : function(grid, rowIndex, e) { //第一个是当前grid,第二个是当前行,第三个是参数 var rec = grid.getStore(…

extjs中gridpanel动态显示/隐藏列

在extjs3中,大家知道用 myGrid.getColumnModel().setHidden(i,true);但到了4.0后,已经没有getColumnModel这个方法了,我们在Ext.panel.Table看到以下片段 if (headerCtCfg instanceof Ext.grid.header.Container) { me.headerCt = headerCtCfg; me.headerCt.border = border; me.columns = me.headerCt…

【编程技巧】ExtJs 设置GridPanel表格文本垂直居中

详细讲解见 http://blog.csdn.net/li396864285/article/details/9310983 以下是我改修的代码: { width:90, items:[{ width:75, xtype:"button", iconCls:"btn-list", text:"查询", handler:func…

Extjs 设置GridPanel单元格可选择高兼容写法

网上大部分都是这种 <style type= "text/css" > .x-selectable, .x-selectable * { -moz-user-select: text! important ; -khtml-user-select: text! important ; -webkit-user-select: text!important; } </style> 上面写法目前只在高版本chrome浏览器上可以,360等google低版本浏览器上不…

Extjs GridPanel用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞(youring2@gmail.com)原创,并发布在http://www.qeefee.com…

[ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总

本文地址:http://blog.csdn.net/sushengmiyan/article/details/42240531 本文作者:sushengmiyan ------------------------------------------------------------------------------------------------------------------------------------ 本文以一个实际例子,使用了extjs的gridpanel中的分组统计显…

Extjs GridPanel 监听事件行选中背景

Extjs设置GridPanel选中行背景色和选中单元格背景色 var view = grid.getView(); view.getRow(index).style.backgroundColor = "red"; //选中行背景色 view.getCell(rowIndex,colIndex).style.backgroundColor = "red"; //选中单元格背景色我在开发时是在CheckboxSelectionModel中的beforerows…

ExtJs基础知识总结：Dom、IFrame和TreePanel、TabPanel（三）

概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFrame的操作,可是如何才能访问IFrame外部Parent的Extjs对象那? 2.在ExtJs中,我们能够通过TreePanel作为导航菜单,可是TreePanel的Root节点在合并和展开的两种状态展现出来的图标却是不一样,如何设置展开和合并时候图标一致性? 其实ExtJs通过简单的设置就能够解决上…

Extjs的学习及MIS系统实践应用（系列文章）

本系列文章从Extjs的实际运用出发,结合系统开发的实践经验,详细解释Extjs的基本控件及控件扩展的用法,和在平时的学习运用中一步一步查阅的资料.积累经验的集锦.标题及链接奉上,用一个小程序,开启了我的Extjs之旅,下面2-8写的是具体的系统内部使用Extjs各种控件及控件扩展的功能介绍. 1.Extjs-初学者在.NET环境下的学习extjs拼写代码的心得 2.Extjs-从最初的textfield控件学起 3.Extjs的ComboBox控件 4.Extjs的DataField.Chec…

gridpanel分组汇总

[ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总 2015-05-31 86 本文地址:http://blog.csdn.net/sushengmiyan/article/details/42240531 本文作者:sushengmiyan -------------------------------------------------------------------------------------------------------…

Extjs中grid表格中去掉红三角

在编辑Extjs的gridpanel的时候,数据有错误或是修改在每个单元格上都会出现红色的小三角,在每个列上面可以配置allowBlank: false来标识这个不可以为空有的时候在保存数据时如果不刷新页面也会留下红三角,那么在创建grid的时候,在grid里面加上下面的语句就不会再出现了: viewConfig: { markDirty: false } 下面是grid的例子: var haomlTongjGeimjGrid = Ext.create('Ext.grid.Panel', {…

Extjs的学习及MIS系统实践应用

Extjs的学习及MIS系统实践应用(系列文章) 本系列文章从Extjs的实际运用出发,结合系统开发的实践经验,详细解释Extjs的基本控件及控件扩展的用法,和在平时的学习运用中一步一步查阅的资料.积累经验的集锦.标题及链接奉上 1.Extjs-初学者在.NET环境下的学习extjs拼写代码的心得 2.Extjs-从最初的textfield控件学起 3.Extjs的ComboBox控件 4.Extjs的DataField.Checkbox.RadioGroup控件 5.Extjs的FormPan…

Ext.Net-Grid 篇

概述前两篇分别介绍了Ext.NET-基础和 Ext.NET-布局,从本篇开始我们尽量做一些实际工作中用到的例子. 在Ext.NET官方示例中,关于GridPanel的例子是最多的(近百个),篇幅所限,我们这里只介绍一些常用的功能,包括页面布局.新建.编辑.查询.删除.排序.分组.统计等功能. 示例代码下载地址>>>>> 页面总体布局首先,再来熟悉下前一篇Ext.NET-布局篇中提到的布局技术. 新建WebForm页面,在ASPX文件中加入如下代码: <%@ Pag…

web导出excel文件的几种方法

总的来说,两种方法:服务器端生成和浏览器端生成. 服务器端生成就是:根据用户请求,获取相应的数据,使用poi/jxl, jacob/jawin+excel,或是用数据拼html的table或是cvs纯文本的数据格式等.然后按.xls或是.cvs格式的文件的形式返回给用户,指定Content-Type:application/vnd.ms-excel ,浏览器就会提示要下载的文件是excel文件. poi/jxl, jacob/jawin生成的是excel的biff格式.html/csv的是文本格…

一个前端html模板处理引擎(javascript) - pure

做后台开发(java/python)的同学开发web应用,对于前端页面生成技术并不陌生,像jsp,freemark等.开发UGC类型的互联网站,因为要SEO友好,所以一般都会在后台用模板引擎直接生成好标准的html代码并渲染输出.但是对于一些富WEB App的应用,如一些工作平台,如OA系统,web端只不过是所有操作客户端的其中一个,同时并行存在的一般还有各种手机端,如android,ios,window mobile,而且各种客户端开发都是基于一套标准的后台API.这时候我们在做web app…

FineUI Grid控件右键菜单的实现

FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对于Grid控件来说,我这里只简单说明两种实现.即在表格的数据行上右键单击时弹出的菜单,以及在空白位置右键单击时弹出的菜单. 时间有限,废话不多说了,先看两个效果图.(实现环境 FineUI4.1.6,.NET 4.0因为需要指定控件的ID) 1. 数据行右键菜单 2. 空白处右键菜单实现方法: s…

【(Extjs)对于GridPanel的各种操作】的更多相关文章