ext 技术文档.docx
- 文档编号:5643414
- 上传时间:2022-12-30
- 格式:DOCX
- 页数:13
- 大小:20.65KB
ext 技术文档.docx
《ext 技术文档.docx》由会员分享,可在线阅读,更多相关《ext 技术文档.docx(13页珍藏版)》请在冰豆网上搜索。
ext技术文档
1、GridPanel右键菜单实现方法:
/**
*创建右键菜单Time:
2009-09-22
*@param{}grid
*@param{}index
*@param{}e
*/
grid.addListener('rowcontextmenu',rightClickFn);
varrightClick=newExt.menu.Menu({
id:
'rightClickCont',
items:
[{
id:
'rMenu1',
text:
'查看数据内容',
handler:
ListRow
},{
id:
'rMenu2',
text:
'删除此条数据',
handler:
delectRow
}]
});
/**
*创建右键菜单Time:
2009-09-22
*@param{}client
*@param{}rowIndex
*@param{}e
*/
functionrightClickFn(client,rowIndex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
};
grid.addListener('rowdblclick',ListRow);//需要此段关键代码【双击事件】
/**
*双击表格_查看数据
*/
functionListRow(grid,e){
varInformList=DataListID();
varnum=InformList.length;
if(num>1)
{
Ext.Msg.alert("提示","数据超过"+num+"条,请选择一条数据!
");
}else{
Ext.Msg.alert("提示","数据为第"+num+"条!
");
}
};
grid.addListener('rowclick',delectRow);//需要此段关键代码【单击事件】
/**
*右键_删除数据
*/
functiondelectRow(grid,e){
varInformList=DataListID();
varnum=InformList.length;
if(num<0)
{
Ext.Msg.alert("提示","请选择删除数据...");
}else{
Ext.Msg.alert("提示","共删除"+num+"条数据....");
}
};
2、双击GridPanel获取数据并覆盖HTML
//双击从表格获取数据
functionlist(){
ListForm.form.load({
waitMsg:
'正在获取消息内容....',//提示信息
waitTitle:
'提示',//标题
url:
'page/ZiyouBaowen/informaction.jsp',//请求URL地址获取后台数据
method:
'post',//请求方式
success:
function(form,action){//加载成功的处理函数
varmsgxmlList;
varrecord=grid.getSelectionModel().each(function(rec){
msgxmlList=rec.get('msgXml');
});
if(msgxmlList==null){
document.getElementById("xml").innerHTML="消息内容无数据";
}else{
document.getElementById("xml").innerHTML=msgxmlList;
}
},
failure:
function(form,action){//加载失败的处理函数
Ext.Msg.alert('错误','服务器出现错误请稍后再试!
');
}
})};
3、创建一个新的窗口
//定义修改密码表单
varListForm=newExt.FormPanel({
region:
'center',
border:
false,
frame:
true,
tabPosition:
'bottom',
bodyStyle:
'padding:
0px0px0',
html:
'
'
12px">
''
});
//创建弹出窗口
varwin=newExt.Window({
title:
'消息_内容',
layout:
'fit',
width:
600,
closeAction:
'hide',
height:
400,
resizable:
false,
shadow:
true,
modal:
true,
closable:
true,
bodyStyle:
'padding:
0000',
animCollapse:
true,
items:
[ListForm]
});
textfield组件的基本用法
//这里是把TextField很重要的属性列出来 实际在应用的时候不需要将每个属性都列出 也许只需要一个属性就够了。
functionready()
{
Ext.QuickTips.init();
vartextfieldName=newExt.form.TextField
({
id:
"textfieldName",
allowBlank:
false,//默认是true,如果是false,就是不允许空
//假如不为空时,定义提示信息 默认的提示信息是:
Thisfieldisrequired
//要使提示内容出现,需要添加Ext.QuickTips.init();
blankText:
"请输入数据",
disabled:
false,//默认是false
emptyText:
"请正确输入数据",//默认是null
fieldLabel:
"用户名称",//默认是""
height:
"auto",//默认是auto
hidden:
false,//默认是false
hideLabel:
false,//默认是false
hideMode:
"offsets",//默认display,可以取值:
display,offsets,visibility
inputType:
"text",//输入类型这个很重要,可以是radio,text,password,file默认是text
invalidText:
"invalidText:
只能够输入数字",//默认是:
Thevalueinthisfieldisinvalid
maxLength:
100,//能够输入的内容的最大长度
maxLengthText:
"输入内容太长了",//超出最大长度的设置信息
minLength:
2,//能够输入的内容的最小长度
minLengthText:
"输入内容太短了",//没有达到最小长度的设置信息
readOnly:
false,//内容是否只读,默认false
regex:
/^\d$/,//正则表达式 这里假设只允许输入数字 如果输入的不是数字 就会出现下面定义的提示信息
regexText:
"regexText:
只能够输入数字",//定义不符合正则表达式的提示信息
validateOnBlur:
true,//默认是true,失去焦点时验证
validationDelay:
300,//默认是250,验证延迟时间,毫秒数
validationEvent:
"click",//验证事件 默认是keyup 可以是String/Boolean
//自定义的验证函数 当输入的数据不符合正则表达式的要求时,就会执行这个函数
validator:
function(){Ext.Msg.alert("提示信息","只能够输入数字");},
value:
"",//自定义的信息 默认是:
undefined
//x:
number,y:
number,在容器中的x,y坐标
width:
"auto",//默认是auto
renderTo:
"Bind_TextField"
});
//以上就是TextField组件的常用定义。
}
Ext.onReady(ready);
//显示图片
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},
{header:
'内容',width:
400,dataIndex:
'msgXml',sorable:
true},
{header:
'创建时间',width:
160,dataIndex:
'msgTime',sorable:
true}
]);
columns.defaultSortable=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('themeCha
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ext 技术文档 技术 文档