EXTJS中的DataView数据展示与RadioGroup数据筛选
2011-05-18 08:19
746 查看
如下图是一个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] }); });
相关文章推荐
- extjs4的radiogroup设值
- 如何使用 DataView 来筛选数据
- ExtJS4——Button/override/NumberField/Hidden/DateField/RadioGroup/CheckboxGroup/ComboBox
- DataSet中利用DataTable,DataView筛选数据
- extjs中默认加载RadioGroup(单选框)的初始化值
- Extjs中RadioGroup的获取值和赋值
- Extjs RadioGroup中Radio的切换
- ExtJS 获取radioGroup及CheckboxGroup值
- ExtJS 单选按钮组RadioGroup在IE浏览器中显示不出来的问题
- ExtJS表单组件RadioGroup属性用法(选中初始值、表单加载,选中取值)的要点
- ExtJS 获取单选按钮的值 radiogroup 获取值 fieldset(radio) 获取值
- DataView 数据筛选
- extjs 3.0 radioGroup的问题解决办法
- ADO.NET 2.0 - 如何使用 DataView 来筛选数据
- Android使用RadioGroup和RadioButton实现筛选条件功能总结好坑啊
- Extjs4 radiogroup打开时的被选中值设置为变量
- ExtJS 4.2 业务开发(二)数据展示和查询
- extjs3 RadioGroup单选变多选问题
- Extjs中RadioGroup的获取值和赋值
- extjs中radiogroup的赋值和取值