![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
ExtJs与Wcf交互生成grid的脚本代码
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//**//**//*
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* Ext JS Library 2.1
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* Copyright(c) 2006-2008, Ext JS, LLC.
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* licensing@extjs.com
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
*
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
* http://extjs.com/license
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
*/
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function()
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// example of custom renderer function
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function change(val)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(val > 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '' + val + '';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(val < 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '' + val + '';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return val;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// example of custom renderer function
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function pctChange(val)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(val > 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '' + val + '%';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else if(val < 0)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return '' + val + '%';
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
return val;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var proxy=new Ext.data.HttpProxy(
{url:'ArrayGridService.svc/GetStocks'});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// create the data store
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var store = new Ext.data.SimpleStore(
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
fields: [
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'company'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'price', type: 'float'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'change', type: 'float'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'pctChange', type: 'float'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
]
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//定义reader
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var reader=new Ext.data.JsonReader(
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
},[
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'company'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'price'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'change'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'pctChange',mapping:'changepercent'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{name: 'lastChange',mapping:'lastupdated'}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
]
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//构建Store
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var store=new Ext.data.Store(
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
proxy:proxy,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
reader:reader
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//载入
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
store.load();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
// create the Grid
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var grid = new Ext.grid.GridPanel(
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
store: store,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
columns: [
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{id:'company',header: "公司", width: 160, sortable: true, dataIndex: 'company'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "单价", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "变动", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "变动百分比", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{header: "最后更新", width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('Y年m月d日'), dataIndex: 'lastChange'}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
],
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
stripeRows: true,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
autoExpandColumn: 'company',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
height:350,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
width:600,
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
title:'股市行情',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
viewConfig:
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
columnsText:'列',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
sortAscText:'升序',
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
sortDescText:'降序'
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
grid.render('grid-example');
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
grid.getSelectionModel().selectFirstRow();
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
});
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
到此,linq部分,wcf部分,extjs部分均开发完成。
第五步:在浏览器中浏览BasicGrid.aspx,效果图如下:
说明大功告成。
说明:这几篇都是简单的实践,有关extjs部分绝大部分参考extjs中的示例,但也做了稍稍的修改,后面的文章会逐渐深入一些。