您的位置:首页 > Web前端 > JavaScript

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]
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: