您的位置:知识库 » .NET技术

用ExtJs+Linq+Wcf打造简单grid

作者: jillzhang  来源: 博客园  发布时间: 2008-09-23 14:56  阅读: 5983 次  推荐: 0   原文链接   [收藏]  
[1] 用ExtJs+Linq+Wcf打造简单grid
[2] 用ExtJs+Linq+Wcf打造简单grid
[3] 用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中的示例,但也做了稍稍的修改,后面的文章会逐渐深入一些。

0
0
标签:WCF

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻