征途:2011_4_3
Basic Array Grid Example的html页面代码为:
《html》
《 head》
《 meta http-equiv="Content-Type" content="text/html; charset=utf-8" /》
《 * title》Basic Array Grid Example《/title》
《!-- ** CSS ** --》
《!-- base library --》
《 * link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /》
《 * 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(../../examples/shared/icons/fam/accept.png);
}
/* style for the "alert" ActionColumn icon */
.x-action-col-cell img.alert-col {
height: 16px;
width: 16px;
background-image: url(../../examples/shared/icons/fam/error.png);
}
《/style》
《!-- ** Javascript ** --》
《!-- ExtJS library: base/adapter --》
《 * script type="text/javascript" src="../../adapter/ext/ext-base.js"》《/script》
《!-- ExtJS library: all widgets --》
《 * script type="text/javascript" src="../../ext-all.js"》《/script》
《!-- page specific --》
《 * script type="text/javascript" src="BasicArrayGrid.js"》《/script》
《/head》
《 body》
《 h1》Stateful Array Grid Example《/h1》《br /》
《 h4》欢迎来到23魔鬼训练营《/h4》
《 div id="grid-example"》《/div》
《/body》
《/html》
js代码为:
/*
* Ext Js Library 3.0.0
* 例子参考开发包3.3.0
* time:2011_4_3
*/
Ext.onReady(function(){
//初始化提示
Ext.QuickTips.init();
//状态
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
/**数据*/
var myData = [
['大唐牛肉无限公司',71.72,0.02,-0.03,'9/1 12:00am'],
['大唐人才资源部',29.01,0.42,1.47, '9/1 12:00am'],
['大唐开发部',45.45, -0.73,1.63,'9/1 12:00am']
];
/*
* column renderer function:
* change列渲染函数。
*/
function change(val) {
if (val > 0) {//值大于0
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {//值小于0
return '<span style="color:red;">' + val + '</span>';
}
return val;//值为0则直接返回
};
/*
* column renderer function:
* pctChange列渲染函数。
*/
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;
};
/**data 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'}
]
});
store.loadData(myData);//加载本地数据
/**创建grid*/
var grid = new Ext.grid.GridPanel({
title: 'BasicArrayGrid',
height: 250,
width: 650,
autoExpandColumn: 'company', //列扩展
store: store,
stripeRows: true,
// config options for stateful behavior
stateful: true,
stateId: 'grid',
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
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'
},{
header: '提货',
dataIndex: 'change',
width: 30,
align: 'center',
renderer: function(value) {
return "<div><img src='../img/delete.gif' class='deletebtnimg' style='width: 20px;height: 20px'/></div>";
}
},{
header: '存货',
dataIndex: 'change',
width: 30,
align: 'center',
renderer: function(value) {
if(value > 0 || value == 0)
{
return "<div><img src='../img/accept.png' class='addbtnimg' style='width: 20px;height: 20px'/></div>";
}else if(value < 0)
{
return "<div><img src='../img/error.png' class='addbtnimg' style='width: 20px;height: 20px'/></div>";
}
}
}
/*,
{
xtype: 'actioncolumn', //开发包3.0.0不支持actioncolumn 故不能运行
width: 50,
items: [{
icon : '../../examples/shared/icons/fam/delete.gif', // Use a URL in the icon config
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'));
}
}]
}*/
]
});
//渲染grid到div中
grid.render('grid-example');
grid.on({
cellclick: function(grid,rowIndex,colIndex,e){
if(e.getTarget().className.indexOf("deletebtnimg") != -1){
Ext.Msg.confirm("确认框","提货?",function(btn){
if(btn.toString().toUpperCase()=="YES")
{
alert("温馨提醒:恭喜您!货物提取成功!");
}
});
};
if(e.getTarget().className.indexOf("addbtnimg") != -1){
Ext.Msg.confirm("确认框","存货吗?",function(btn){
if(btn.toString().toUpperCase()=="YES")
{
alert("温馨提醒:恭喜您!存货成功!");
}
});
}
}
});
/**grid监听*/
/* this.getGrid().on({
cellclick: function (g, r, c, e) {
if (e.getTarget().className.indexOf("div类名") != -1) {
Msg.confirm("您确定要标记此记录为已完成吗?", function (btn) {
if (btn.toString() == "yes") {
var record = g.getStore().getAt(r);
//提交数据保存。
AppAjax.request({
url: {
url: String.format(ACom.getUVAction("moduleName", "save"), record.get("id")),
method: ACom.getUVMethod("moduleName", "save")
},
params: {
"model.sfwc": true //只提交修改的部分。
},
scope: this,
success: function (data) {
g.refreshGrid();
}
});
}
});
}
}
});*/
});