Ext.onReady(function(){
// NOTE: This is an example showing simple state management. 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());
// sample static data for the store
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']
];
/**
* Custom function used for column renderer
* @param {Object} val
*/
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;
}
/**
* Custom function used for column renderer
* @param {Object} 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;
}
// create the 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'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
ddGroup:'GridDD',
store: store,
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'}
],
stripeRows: true,
autoExpandColumn: 'company',
enableDragDrop:true,
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
var gridEl = grid.getView().el.dom.childNodes[0].childNodes[1];
var ddrow = new Ext.dd.DropTarget(gridEl,{
ddGroup : 'GridDD',
copy : false,
notifyDrop : function(dd,e,data){
//选中了多少行
var rows = data.selections;
//拖动到第几行
var index = dd.getDragData(e).rowIndex;
if (typeof(index) == "undefined"){
return;
}
//修改store
for ( i=0; i<rows.length; i++){
var rowData = rows[i];
if (!this.copy) store.remove(rowData);
store.insert(index, rowData);
}
}
});});
分享到:
相关推荐
mfc 写的GIRD 源码,有两个例题,一个是基于对话框的;一个是Doc/View
ext2.0动态加载grid的例子,内附完整源码!
selenium gird 资源part2
selenium gird 简介selenium gird 简介
一个很优秀的前台GIRD组件,速度快,体积小。最重要的,这个是免费的。:)
exejs gird filter java action整合资料
selenium gird资源selenium gird资源part1
gird_layout.zip
ext Gird 有滚动条功能 附带滚动条 重写原本EXT
Gird_Eye模块的Linux上位机,用qt开发,里面涉及到Linux串口通信编程
电子表格,用VC实现的,表格具有常用功能,用起来十分方便,有一点点像MS_OFFICE的风格
在您的浏览器上创建Bootstrap Gird系统 在浏览器上创建Bootstrap Gird系统,轻松调整大小和拖放功能 支持语言:English
Echarts参数属性学习Gird演示案例:在同一个DOM中,使用gird同时创建折线图和柱图,可高效的利用数据,同时对API的开发和对接有事半功倍的效果。
oracle11g+gird+asm+RAC 配置data guard
可以实现js的左键单击,双击,拖拽,右键单击,双击,拖拽,和中键的单击,双击和拖拽事件,以及滚轮事件,已经封装成jquery插件,调用方便,功能强大。
打印预览控件,包含VB源程序.打印预览控件Printer first Gird,包含VB源程序
源码实现了ligerui中grid行颜色控制,列隐藏保存。
nui或者miniui中gird合并重复行数据,查找某行
CSS网格布局是一个二维的基于网格的布局系统, 其目的在于完全改变我们设计基于网络的用户界面的方式。CSS一直用来布局我们的网页, 但是他从来没有做过很好的工作, 最开始我们使用表格,然后 float , position 和 ...
例如,数据表中有一个字段 f_DemoImage 用来存放图片的路径(包括图片文件名),为了在 DataGrid 的 Cell 中显示实际的图片,我们可以定义一个模板列,然后给该列赋予字段 f_DemoImage 的值,就可以在 DataGrid 的 ...