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