如附件图片
Ext.onReady(function(){
// Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
// example of custom renderer function
function change(value){
if(value > 1){
return '<span style="color:green;">' + value + '%</span>';
}else if(value < 1){
return '<span style="color:red;">' + value + '%</span>';
}
return value;
}
// data
var myData = [
['公司 A',71.72,0.02,0.03,'9/1 12:00am'],
['公司 B',29.01,1.42,1.47,'9/1 12:00am'],
['公司 C',83.81,2.28,0.34,'9/1 12:00am']
];
// simpleStore
var store = new Ext.data.SimpleStore({
data:myData, // store.loadData(myData);
fields:[
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// load data
// store.loadData(myData);
// columns
var colM = new Ext.grid.ColumnModel(
[
{id:'company',header: "公司",sortable: true, dataIndex: 'company'},
{header: "价格",sortable: true,renderer:'usMoney',dataIndex: 'price'}, // renderer: fn
{header: "Change",sortable: true,renderer:change,dataIndex: 'change'},
{header: "% Change", sortable: true, dataIndex: 'pctChange'},
{header: "更新日期", sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
);
// create new grid
var grid = new Ext.grid.GridPanel({
store:store,
cm:colM,
stripeRows: true, // 隔行换色
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});
grid.render('grid-example');
grid.getSelectionModel().selectFirstRow();
});
- 大小: 24 KB
分享到:
相关推荐
后来公司让改变一个Gridpanel的展现方式,要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久,也没有找到框架的相应控制方法,然后在网上找了很久,也没有找到有人给去示例,无奈就只能自己写JS来控制...
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
第八章:Extjs组件结构 46 一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被...
view就是我们说的组件了,比如gridpanel,当然extjs4对这些组建命名发生了改变,不妨碍我们学习,都是一样的。然后就是学习一下view怎么和controller交互的,我这个例子只是alert了一下,进一步的要求跟你们实际需求...
8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格...
《extjs开发实战》从extjs中最基本的概念开始,例如dom操作、面向对象、ponent/container模型的生命周期、组件管理等,并介绍如何使用项目开发中最常使用的各种组件,例如 panel、formpanel、gridpanel等,...
ExtJS 2.1~3.x 调用 swfupload 制作的多附件上传组件,带进度条,列表为gridpanel
之前用EXTJS的gridPanel组件的时候,因为经常对gridPanel中的stroe数据进行过滤,所以有时候总是导致gridPanel自身所带的scrollbar失效。 取个实例,EXTJS gridPanel自带的滚动条,是有一个固定的列宽来放置这个...
Grid Panel是ExtJS的核心部分之一,通过Grid Panel可以对数据显示、排序、分组和编辑。Model和Store是Grid Panel处理数据的核心,每个Grid Panel都必须设置Model和Store。要创建Grid Panel,首先要定义Model,Model...
……..8 2.2 ExtJS的组件………………………………………………………………………………………………………...9 2.3 组件的使用………………………………………………………………………………………………...
有人说缺一个综合应用的例子,补发一个上来(ExtJs3.2综合应用的例子:云计算管理平台)。这个例子涉及到以下主题: 1.如何划分系统模块; 2.如何扩展组件;...3.基本组件Viewport、TreePanel、GridPanel用法。
实现grid单元格重复数据的合并,完整的案例实现,包含合并方法和调用过程