- 浏览: 196349 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
在世界的中心呼喚愛:
思路很好
连连看全局消除算法 -
tianaozhu:
请问,我修改了词库和源文件怎么就不好用了, 我源文件是: My ...
自己动手开发翻译软件(Java版) -
Arlrn:
博主你好,最近在学习排序算法,看了你的博客,你的直接插入排序, ...
各种排序算法的实现及其比较 -
sharong:
有一个明显错误,很显然冒泡排序的时间复杂度是O(n^2)
各种排序算法的实现及其比较 -
julydave:
希尔排序不太对吧。。
各种排序算法的实现及其比较
这一节开始,复习grid,博大精深呀!
拿官网的例子来看看。
代码和注释如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>主窗口</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /></script> <script type="text/javascript" src="../adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="../ext-all.js"> </script> <style type=text/css> /* style rows on mouseover */ .x-grid3-row-over .x-grid3-cell-inner { font-weight: bold; } /* style for the "buy" ActionColumn icon */ .x-action-col-cell img.buy-col { height: 16px; width: 16px; background-image: url(icon/accept.png); } /* style for the "alert" ActionColumn icon */ .x-action-col-cell img.alert-col { height: 16px; width: 16px; background-image: url(icon/error.png); } </style> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); //开启tooltip提示功能 // During development, // it is generally best to disable state management as dynamically-generated ids // can change across page loads, leading to unpredictable results. The developer // should ensure that stable state ids are set for stateful components in real apps. Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); // 下面要使用到的数据 var myData = [ ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'], ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'], ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'], ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'], ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'], ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'], ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'], ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'], ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'], ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'], ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'], ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'], ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'], ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'], ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'], ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'], ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'], ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'], ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'], ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'], ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'], ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'], ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'], ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'], ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] ]; // 创建store模型,用来规定表格中每一列的数据索引名和数据类型等 var store = new Ext.data.ArrayStore({ fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} //日期型,格式:09/01/2010 ] }); // 用刚创建的模型来加载上面的数据 store.loadData(myData); // 开始创建 Grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ //设置每一列的其它属性 { id :'company', header : 'Company', //列名 width : 160, sortable : true, //可排序 dataIndex: 'company' //这就是上面store里面的第一个属性 }, { header : 'Price', width : 75, sortable : true, renderer : 'usMoney', dataIndex: 'price' }, { header : 'Change', width : 75, sortable : true, renderer : change, //该函数在下面定义,用来控制显示的样式 dataIndex: 'change' }, { header : '% Change', width : 75, sortable : true, renderer : pctChange, //该函数也在下面定义,用来控制显示的样式 dataIndex: 'pctChange' }, { header : 'Last Updated', width : 85, sortable : true, renderer : Ext.util.Format.dateRenderer('m/d/Y'), //用这种方式来格式化日期 dataIndex: 'lastChange' }, { xtype: 'actioncolumn', //注意这种类型,A grid column type which renders an icon, or a series of icons in a grid cell,and offers a scoped click handler for each icon. width: 50, items: [{ icon : 'icon/delete.gif', // 引用图标地址 tooltip: 'Sell stock', //浮动小汽泡提示,当鼠标放上去时就显示 handler: function(grid, rowIndex, colIndex) { var rec = store.getAt(rowIndex); alert("Sell " + rec.get('company')); } }, { getClass: function(v, meta, rec) { // Or return a class from a function if (rec.get('change') < 0) { this.items[1].tooltip = 'Do not buy!'; return 'alert-col'; } else { this.items[1].tooltip = 'Buy stock'; return 'buy-col'; } }, handler: function(grid, rowIndex, colIndex) { var rec = store.getAt(rowIndex); alert("Buy " + rec.get('company')); } }] } ], stripeRows: true, autoExpandColumn: 'company', //默认按company列来排序 height: 350, width: 600, title: 'Array Grid', // config options for stateful behavior stateful: true, stateId: 'grid' }); /** * 用来控制行的显示颜色,负的为红色的,正数为绿色的 */ function change(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 pctChange(val) { if (val > 0) { return '<span style="color:green;">' + val + '%</span>'; } else if (val < 0) { return '<span style="color:red;">' + val + '%</span>'; } return val; } // render the grid to the specified div in the page grid.render(Ext.getBody()); }); </script> </head> <body bgcolor="#9ad8ef"> </body> </html>
其中有个getClass函数,官网解释如下:
A function which returns the CSS class to apply to the icon image. The function is passed the following parameters:
-
v : Object
The value of the column's configured field (if any).
-
metadata : Object
An object in which you may set the following attributes:
-
css : String
A CSS class name to add to the cell's TD element.
-
attr : String
An HTML attribute definition string to apply to the data container element withinthe table cell (e.g. 'style="color:red;"').
-
css : String
-
r : Ext.data.Record
The Record providing the data.
-
rowIndex : Number
The row index..
-
colIndex : Number
The column index.
-
store : Ext.data.Store
The Store which is providing the data Model.
发表评论
-
Ext js面向对象的特性
2011-05-11 11:06 10191、支持命名空间(Java里用的是包的概念) Ex ... -
Ext 2.x中,关于combobox的取值问题
2011-02-15 19:47 1778Ext中,关于combobox的取 ... -
Ext常用的知识点(三)--combobox和xml的绑定
2011-02-09 11:47 1070直接看代码,所有需要注意的地方都标在代码后面了 Ext ... -
Ext常用的知识点(二)--panel和window
2011-02-09 01:16 15481、Panel 很容易就可以做写出一个panel v ... -
Ext常用的知识点(一)--弹出消息
2011-02-08 21:38 1390首先,要写Extjs,建议大家用一个工具spket。 ... -
Extjs复习笔记(二十)-- tree和grid结合
2010-11-07 12:20 1611让tree和grid结合起来 相关内容之前大都讲过,这里就不 ... -
Extjs复习笔记(十九)-- XML作为tree的数据源
2010-11-07 11:52 2675用XML来作为tree的数据源 所有文件都上传了 ... -
Extjs复习笔记(十八)-- TreePanel
2010-11-07 11:09 1312Grid这一块暂时就讲到这。这一节开始就是tree的相关内容了 ... -
Extjs复习笔记(十七)-- 给grid里面的内容分组
2010-11-07 03:11 2007给grid里面的内容分组。 Ext.onReady(fun ... -
Extjs复习笔记(十六)-- 可编辑的grid
2010-11-07 02:43 1856可编辑的grid。 可以响应数据加载完时的事件。。。 可以 ... -
Extjs复习笔记(十五)-- JsonReader
2010-11-07 01:54 2715使用JsonReader来创建grid中的store (exa ... -
Extjs复习笔记(十四)-- XmlReader
2010-11-05 13:48 2383读取XML文件来构造grid 先了解一个函数:Ext.dat ... -
Extjs复习笔记(十二)--form验证
2010-11-04 23:37 1431验证。。。 1、不允许 ... -
Extjs复习笔记(十一)--换肤
2010-11-04 21:48 1305换肤功能 首先写一个 ... -
Extjs复习笔记(十)-- 网页主框架
2010-11-04 14:58 1048主界面的雏形: <!DOCTYPE html ... -
Extjs复习笔记(九)-- 加载等待
2010-11-04 13:29 2130登陆时的加载状态: <style type=&qu ... -
Extjs复习笔记(八)--登陆框
2010-11-03 02:33 1779之前有一篇博客展示了一个图书管理系统,接下来的几篇博客将会解析 ... -
Ext图书管理系统
2010-10-31 10:17 1900其实这一篇日志写很久了,由于近期项目演示的需要,我把它转到这边 ... -
Extjs复习笔记(七)-- ComboBox的添加、修改
2010-10-31 02:09 2601ComboBox的测试,有几个方法没写完整,有待之后解决。。。 ... -
Extjs复习笔记(六)--完整的浮动窗口
2010-10-30 03:30 3347前面搞了这么久的基础,下面该来做这个界面了: 这是一个浮动窗 ...
相关推荐
在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...
在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...
在EXTJS框架中,换肤是一项重要的功能,它允许开发者根据用户需求或品牌风格改变应用程序的外观和感觉。本文将深入探讨EXTJS的换肤机制,以及如何利用提供的主题CSS文件实现这一特性。 EXTJS是一个强大的JavaScript...
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
在“Extjs复习笔记(十五)-- JsonReader”这篇博文中,博主探讨了ExtJS中的JsonReader,这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包(Ext.data)的一部分,用于从服务器获取JSON格式的数据,...
本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组,帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类,这样可以更清晰地组织和展示数据。这在处理大量数据时...
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
Extjs6.2 生成的admin-dashboard官方模板
ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
"extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...
ExtJS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记(十四)--- ComponentQuery ExtJS4...
ExtJS 4.2 component - Field-Money
ExtJS 是一个流行的JavaScript库,主要用于构建富客户端的Web应用程序。这个实例——"嗖嗖嗖",似乎是一个基于ExtJS的项目,但具体的功能或用途并未在标题和描述中明确指出。不过,我们可以根据提供的文件名来推测...
这个"extjs-3.0-all-src"文件是ExtJS 3.0的完整源代码包,对于开发者来说,深入理解其内部机制和进行自定义扩展非常有价值。让我们详细探讨一下这个框架及其相关知识点。 1. **ExtJS框架概述**: ExtJS 是由Sencha...
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....
在EXTJS中,GridPanel是一种常用的组件,用于展示表格数据。在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加...