如下图是一个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] }); });