//显示图片
xtype:
'box',
id:
'box',
width:
100,//图片宽度
height:
100,//图片高度
autoEl:
{
tag:
'img',//指定为img标签
src:
'img/help.jpg'//指定url路径
}
xtype:
"textfield",
inputType:
"image",//设置为图片格式显示
id:
"img",
width:
100,
height:
90,
validationEvent:
"click",//验证事件 默认是keyup 可以是String/Boolean
//自定义的验证函数 当输入的数据不符合正则表达式的要求时,就会执行这个函数
validator:
function(){Ext.Msg.alert("提示信息","只能够输入数字");}
//创建表格显示数据
/**
*创建InformactionRecord类型,对实体对象进行封装
*/
varInformactionRecord=Ext.data.Record.create([//字段根据后台Bean来设定...
{name:
'id'},
{name:
'msgXml'},
{name:
'msgTime'}
]);
/**
*定义头部栏框
*/
vartoolbar=newExt.Toolbar([
{text:
'删除数据',iconCls:
'remove',handler:
showDelete}
]);
/**
*定义复选框选择模式变量
*/
varcheckbox=newExt.grid.CheckboxSelectionModel();
/**
*处理从后台获得数据,使用HttpProxy
*/
varstore=newExt.data.Store({
//传递action./transcribe_get.actionpage/ZiyouBaowen/informaction.jsp
proxy:
newExt.data.HttpProxy({url:
"./transcribe_get.action"}),
reader:
newExt.data.JsonReader({
totalProperty:
'totalCount',//指定记录总数totalCountresult
root:
'result'//当前页面显示信息队列resultitems
},InformactionRecord),
remoteSort:
true
});
store.load({params:
{start:
0,limit:
10}});//进行分页查询
/**
*将显示的数据与Store中的数据相对应
*/
varcolumns=newExt.grid.ColumnModel([//根据上面定义
checkbox,
{header:
'编号',width:
80,dataIndex:
'id',sorable:
true,},//sorable是否排序
{header:
'内容',width:
400,dataIndex:
'msgXml',sorable:
true},
{header:
'创建时间',width:
160,dataIndex:
'msgTime',sorable:
true}
]);
columns.defaultSortable=true;//将所有的列设置为可排序的
MenDisabled:
true//设定某一列不可操作
/**
*创建Grid表格组件
*/
vargrid=newExt.grid.GridPanel({
//title:
'消息查看界面',
region:
'center',
//collapsible:
true,
loadMask:
true,//开启读取数据提示功能,显示等待提示信息
store:
store,//设置表格对应的数据集
tbar:
toolbar,//设置顶端工具栏
cm:
columns,//配置数据集
height:
333,
//newExt.grid.RowSelectionModel({singleSelect:
true}),//限制只能选取一行数据
sm:
checkbox,//设置复选框选择模式
viewConfig:
{
forceFit:
false,
columnsText:
'显示的列',
sortAscText:
'升序',
sortDescText:
'降序'
},//分页工具条
bbar:
newExt.PagingToolbar({
pageSize:
10,
store:
store,
displayInfo:
true
})
});
/////////////////////////删除数据
/**
*辅助类_获取表格ID
*@return{}
*/
functionDataListID(){
varrecord=grid.getSelectionModel().getSelections();
varList=[];
if(record.length==0){
Ext.Msg.alert("警告","操作错误!
");
}else{
for(vari=0;i { varrec=record[i]; List.push(rec.get('id')) } returnList; } }; /** *消息查看_显示删除对话框 */ functionshowDelete(){ varInformList=DataListID(); varnum=InformList.length; if(num==0){ return; } Ext.MessageBox.confirm("提示","您确定要删除所选数据吗? ",function(btnId){ if(btnId=='yes'){ alert(btnId); DeleteInformaction(InformList); } }) }; /** *消息查看_删除数据 *@param{}InformList */ functionDeleteInformaction(InformList){ varid=InformList.join('-');//将包含书籍ID的数组连接为'-'分隔的字符串 //显示正常删除的信息提示 varmsgTip=Ext.MessageBox.show({ title: '提示', width: 250, msg: '正在删除数据请稍后......'//提示消息 }); Ext.Ajax.request({ url: '',//连接ACTION params: {id: id},//传值,设置请求参数 method: 'POST', success: function(response,options){ msgTip.hide();//隐藏提示信息 //解析字符串为JSON对象 varresult=Ext.util.JSON.decode(response.responseText); if(result.success){//成功 //服务器端数据成功删除后,同步删除客户端列表中的数据 for(vari=0;i varindex=store.find('id',InformList[i]); if(index! =-1){ varrec=store.getAt(index) store.remove(rec); } } Ext.Msg.alert('提示','删除数据信息成功。 '); }else{ Ext.Msg.alert('提示','删除数据信息失败! '); } }, failure: function(response,options){//请求失败后的回调函数 msgTip.hide();//隐藏提示信息 Ext.Msg.alert('提示','删除数据信息请求失败! '); } }); }; //ext皮肤换色 themeChange.js 代码如下: Ext.ux.ThemeChange=Ext.extend(Ext.form.ComboBox,{ editable: false, displayField: 'theme', valueField: 'css', typeAhead: true, mode: 'local', triggerAction: 'all', selectOnFocus: true, initComponent: function(){ varthemes=[ ['默认','ext-all.css'], ['浅灰色','xtheme-gray.css'], ['暗蓝色','xtheme-slate.css'] ]; this.store=newExt.data.SimpleStore({ fields: ['theme','css'], data: themes }); this.value='默认'; }, initEvents: function(){ this.on('collapse',function(){ Ext.util.CSS.swapStyleSheet('theme','ext/resources/css/'+this.getValue()); }); } }); Ext.reg('themeChange',Ext.ux.ThemeChange); Index.jsp添入以下代码 放入的位置任你选择 { xtype: 'themeChange',//实例化一个对象 text: '皮肤选择: ', width: 80, listWidth: 80 } //在表格中添加按钮 functionsetGrid(){ varcm=newExt.grid.ColumnModel([ {header: "",dataIndex: "button",width: 130,renderer: showbutton}, {header: 'ID',dataIndex: 'id',hidden: true}, {header: '名',dataIndex: 'title'}, {header: 'sort',dataIndex: 'fileComment'}, {header: '登陆者',dataIndex: 'wfWaitUserName'}, {header: '所属',dataIndex: 'wfWaitSecName'}, {header: '开始日',dataIndex: 'wfCreateDate'} ]); functionshowbutton(value,cellmeta){ varreturnStr=" returnreturnStr; } //条件查询已经分页查询 /** *处理从后台获得数据,使用HttpProxy */ varmyPageSize= copyright@ 2008-2022 冰豆网网站版权所有 经营许可证编号:鄂ICP备2022015515号-1