EXTJS中的DataView數據展示與RadioGroup數據篩選

如下圖是一個DataView數據展示與RadioGroup數據篩選的簡單例子：

代碼如下：

　Ext.BLANK_IMAGE_URL='ext-3.2.0/resources/images/default/tree/s.gif'; Ext.onReady(function(){ var store=new Ext.data.JsonStore({ url: 'xxx.aspx', baseParams :{action:'getInfos',sort:sort}, root: 'data', autoLoad:true, fields: ['LOG_DATE','LOG_INFO','LOG_TYPE'], reader: new Ext.data.JsonReader({}, [ {name: 'LOG_DATE', type: 'date'}, {name: 'LOG_TYPE', type: 'string'}, {name: 'LOG_INFO'} ]) }); var tpl = new Ext.XTemplate( '<table width="97%" cellpadding="0" cellspacing="0" style="border-right:1px solid #FFA938;border-left:1px solid #FFA938;border-top:1px solid #FFA938;" mce_style="border-right:1px solid #FFA938;border-left:1px solid #FFA938;border-top:1px solid #FFA938;">',// cellpadding="0" cellspacing="0" '<tpl for=".">', '<tr><td width="100%">', '<table border=0 width="100%" cellpadding="0" cellspacing="0">', '<tr style="{[xindex % 2 === 0 ? " mce_style="{[xindex % 2 === 0 ? "background-color:#FFFFFF" : "background-color:#FFF4DF"]}">',//f5ffeb '<td height="80px" valign=top ><div class="myli" style="min-height:70px;max-heigt:none;width:100%;word-break:break-all;margin-top:5px;"><img style="width: 12px;" alt="" src="../../../Image/logo/{LOG_TYPE}.gif" mce_src="Image/logo/{LOG_TYPE}.gif"/>{LOG_DATE}<br>{LOG_INFO}</div></td>', '</tr>', '<tr><td height="5px" style="{[xindex % 2 === 0 ? " mce_style="{[xindex % 2 === 0 ? "background-color:#FFFFFF" : "background-color:#FFF4DF"]}"></td></tr>', '<tr><td style="height:1px; background-color:#FFA938;"></td></tr> ', '</table>', '</td></tr>', '</tpl>', '</table>' ); //DataView對象定義 var dataview = new Ext.DataView({ store:store, tpl : tpl, id:'view_1', itemSelector:'',//undefined錯誤,必須配置 layout: 'fit', monitorResize: true, autoScroll : true }); //RadioGroup定義 var myRadioGroup = new Ext.form.RadioGroup({ xtype: 'radiogroup', width:400, items: [ {boxLabel: '全部', name: 'guilei', inputValue: '', checked: true}, {boxLabel: '單位', name: 'guilei', inputValue: 'dw'}, {boxLabel: '專家', name: 'guilei', inputValue: 'zj'}, {boxLabel: '物資', name: 'guilei', inputValue: 'wz'}, {boxLabel: '隊伍', name: 'guilei', inputValue: 'duiw'} ], listeners : { 'change' : function(myRadioGroup,checked){ 　　　　　　　　　　　//修改數據源的參數（從RadioGroup選中的值獲得） store.setBaseParam('sort',checked.inputValue); store.reload(); } } }); function selFail(response,option) { Ext.Msg.alert('提示','操作出現異常'); } //外圍容器 var panel = new Ext.Panel({//創建一個面板 header : false, border:false, region:'center', monitorResize: true, autowidth:true, autoheight:true, frame:true, layout:'fit',//聲明佈局類型 layoutConfig: { animate: true //動畫效果啓用 }, tbar:new Ext.Toolbar({ height: 28, enableOverflow: true, items: [ myRadioGroup ] }), items:dataview }); //最外層容器 var viewport = new Ext.Viewport({ header : false, border:false, layout:'border', id:'view', items:[panel] }); });