- 浏览: 251681 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
rdsgf:
也就是导出。。。如何把生成的图片导出到本地,有没有接口?
报表 charts4j -
rdsgf:
你好,请问生成的图片如何保存到本地?
报表 charts4j -
刘焕杰:
楼主,为啥放进去后,我下载的中文文件名还是乱码呢?
[jspSmartUpload]------------>jspSmartUpload上传中文文件名 乱码问题 -
814687491:
Ext Panel 动态 加载 html -
yxyysu:
下载之后使用了,没有解决上传时中文名字乱码问题,请博主指导。
[jspSmartUpload]------------>jspSmartUpload上传中文文件名 乱码问题
编写js文件
1. 数据,要显示到页面上的数据
装载入Ext.data.SimpleStore
把数据装载到一个简单的Store中
用最常用的GridPanel显示数据
在html文件中显示出来
1. 数据,要显示到页面上的数据
var myData = [ [ 1, { text: 'Ext', url: 'http://extjs.com' }, -10.00, '2008-01-01 12:01:01', 'br.gif', 'Atlantic Spadefish.jpg', { text: '一', tips: '提示1' } ], [ 2, { text: 'Google', url: 'http://www.google.cn' }, 1.00, '2008-02-16 12:01:02', 'fr.gif', 'Bat Ray.jpg', { text: '二', tips: '提示2' } ], [ 3, { text: '新浪', url: 'http://www.sina.com.cn' }, 0, '2008-03-15 12:01:03', 'cu.gif', 'Blue Angelfish.jpg', { text: '三', tips: '提示3' } ], [ 4, { text: '雅虎', url: 'http://www.yahoo.com.cn' }, 10.01, '2008-04-14 12:01:04', 'es.gif', 'Bluehead Wrasse.jpg', { text: '四', tips: '提示4' } ], [ 5, { text: 'CSDN', url: 'http://www.csdn.net' }, 200.90, '2008-05-13 12:01:05', 'cn.gif', 'Cabezon.jpg', { text: '五', tips: '提示5' } ] ];
装载入Ext.data.SimpleStore
把数据装载到一个简单的Store中
var store = new Ext.data.SimpleStore({ // 设置 编号, 链接, 数字, 时间, 图标, 图片提示, 文字提示 fields: [ { name: 'id',type: 'int' //编号 },{ name: 'linker'//链接 },{ name: 'number',type: 'float'//数字 },{ name: 'datetime',type: 'date',dateFormat: 'Y-m-d H:i:s'//时间 },{ name: 'icon'//图标 },{ name: 'qtips'//图片提示 },{ name: 'tips'//文字提示 }] }); store.loadData(myData);
用最常用的GridPanel显示数据
//定义方法,为数据载入表格时候有不同的显示 function leftPadfun(val){ return String.leftPad(val, 5, "0"); } /** * 根据text: , url 生产一条完整的链接 */ function linkerfun(val){ if (typeof val == 'object') { return '<a style="display:table;width:100%;" title="' + val.url + '" target="_blank" href="' + val.url + '">' + val.text + '</a>' } return val; } /** * 根据数值的大小分别显示不同的颜色 * 大于0 显示为绿色 * 小于0 显示为红色 */ function numfun(val){ if (val > 0) { return '<span style="color:green;">' + val + '</span>'; } else if (val < 0) { return '<span style="color:red;">' + val + '</span>'; } return val; } /** * 得到图标的应用 */ function iconfun(val){ return '<img src="images/' + val + '">' } /** * 得到提示图片 * 添加qtip属性 * 要在HTML中使用QuickTip显示提示,只要在标记中加入qtip属性就可以了 * Ext.QuickTips.init();进行初始化 * */ function qtipsfun(val){ return '<span style="display:table;width:100%;" qtip=\'<img src="images/' + val + '">\'>' + val + '</span>' } /** * 包含提示的文字 */ function tipsfun(val){ if (typeof val == 'object') { return '<span style="display:table;width:100%;" title="' + val.tips + '">' + val.text + '</span>' } return val } var grid = new Ext.grid.GridPanel({ height: 350, width: 800, store: store, title: '自定义单元格的显示格式', frame: true, columns: [{ header: '编号', width: 80, sortable: true, renderer: leftPadfun, dataIndex: 'id' }, { header: "链接", width: 75, sortable: true, renderer: linkerfun, dataIndex: 'linker' }, { header: "数字", width: 75, sortable: true, renderer: numfun, dataIndex: 'number' }, { header: "时间", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex: 'datetime' }, { header: "图标", width: 75, sortable: true, renderer: iconfun, dataIndex: 'icon' }, { header: "图片提示", width: 75, sortable: true, renderer: qtipsfun, dataIndex: 'qtips' }, { header: "文字提示", width: 75, sortable: true, renderer: tipsfun, dataIndex: 'tips' }], stripeRows: true, autoExpandColumn: 5, listeners: { // 定义列单击时间监听 // rowclick: function(trid, rowIndex, e){ // Ext.get('op').dom.value += '------------------------\n' + // Ext.encode(store.getAt(rowIndex).data) + // '\n'; // } rowclick : rowclickevent } }); // 对QuickTips进行初始化 Ext.QuickTips.init(); function rowclickevent(trid, rowIndex, e) { Ext.get('op').dom.value += '------------------------\n' + Ext.encode(store.getAt(rowIndex).data) + '\n'; }
在html文件中显示出来
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>自定义单元格的显示格式</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入必要的Ext库文件--> <link rel="stylesheet" type="text/css" href="../Extjs/resources/css/ext-all.css" /> <!-- EXT LIB --> <script src="../Extjs/adapter/ext/ext-base.js"></script> <script src="../Extjs/ext-all.js"></script> <script type="text/javascript" src="1_Grid.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); Ext.Msg.minWidth = 300; // 把表格加载到id为panell的div中 grid.render('panel1'); // 设置textarea为空 Ext.get('op').dom.value = ""; }) </script> </head> <body> <h1 style="margin:20px 0px 0px 20px;">第4章 自定义单元格的显示格式</h1> <br/> <div style="padding-left:20px;"> <div id="panel1"> </div> <br> <div>事件:</div> <textarea id='op' rows="10" style="width:800px;"></textarea> <br/> </div> </body> </html>
发表评论
-
Ext 右上角小图标 tool
2013-04-17 13:59 852tools: [ {id:'toggle'},{id:' ... -
Ext3.4源码之Store -> load() 与reload()
2013-04-03 17:52 21381. load()的源码 // 加载Store的数据 l ... -
Ext3.4源码之Ext.apply()和 Ext.applyif()
2013-04-03 10:08 11661. 查看ext-base.js中的源码可知: Ext.ap ... -
ext-basex.js 进行Ext.Ajax.request 同步请求 FF无法正常
2013-03-04 16:25 15571. ext-basex.js 下载地址. http://co ... -
Ext 上传附件返回值 <pre>json</pre>格式,ff报错
2012-12-19 14:37 828getResponse().getWriter().pri ... -
extjs store中数据转换成json
2012-11-19 17:42 44841. 主要有以下两种方法: var jsonData = ... -
view.getComputedStyle(div.firstChild.firstChild, null) is null
2012-11-07 15:13 952最近在开发时候发现一个很奇怪的错误: Ext 代码如下 ... -
Ext Grid 横行滚动条
2011-12-16 18:29 847主意配置 viewConfig: { auto ... -
Ext.data.Store 小细节收集
2011-10-14 15:09 16781. 常用的初始化方法 新建一个store一般的方法如下(一般 ... -
Ext.Ajax.request 小问题收集
2011-10-14 14:23 10181. Template 一般的Ext.Ajax.request ... -
拼音输入法下输入字母Ext combo 无法进行过滤修正
2011-10-13 10:20 1687最近项目中用来ext 的combo 发下下面一个问题 eg: ... -
Ext 2.x combo keyup事件无法响应
2011-10-12 18:38 1249Ext.override(Ext.form.Combo ... -
Ext Combo 添加空值并且显示出来
2011-10-08 16:15 32061、最简单的方案是在后台从数据库中查询了Combobox数据时 ... -
Ext Grid 小细节收集
2011-09-27 14:51 10061. columns 中的renderer参数 rende ... -
Ext Panel 动态 加载 html
2011-09-13 14:54 3305要实现动态加载html也是时候常用的有下面的方法: 1.aut ... -
Ext 小错误整合
2011-09-01 11:49 11161. Ext.this.addEvents is not a ... -
Ext ajax JSON 数据遍历
2011-07-24 02:08 6978需求:进行ajax请求后,后台传递回来以下json数据 ... -
Ext.TreePanel 的小问题集合
2011-07-07 21:35 7811.unterminated string literal ... -
jsp 进行下载时候乱码 ff正常,IE打开新页面
2011-07-06 22:04 1152最近在通过JSP实现下载的时候,发现火狐下面可以完全正常,但是 ... -
Ext 生成树递归算法
2011-07-05 20:49 1489最近在生成Ext的树型结构是,要用递归的算法来实现从数据库中读 ...
相关推荐
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext.grid.GridPanel 删除线 放到example文件夹下运行
Ext.grid.ColumnModel显示不正常
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便,下面是从网上搜到的解决方案。
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....
var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
EXT GridPanel获取某一单元格的值
// not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display: // none? ...
Ext GridPanel加载完数据后进行操作,比如load数据之后选定某些行数据,下面有个示例,需要的朋友可以参考下
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。 下面
表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种: JsonStore,...
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data....