Ext教程.docx
- 文档编号:24396856
- 上传时间:2023-05-27
- 格式:DOCX
- 页数:16
- 大小:19.82KB
Ext教程.docx
《Ext教程.docx》由会员分享,可在线阅读,更多相关《Ext教程.docx(16页珍藏版)》请在冰豆网上搜索。
Ext教程
/*
*作者:
章日纬
*页面所属模块:
示例模块
*页面完成功能:
展示EXT表单FormPanel和表格GridPanel的使用
*/
Ext.onReady(function(){
Ext.QuickTips.init();
/*定义全局变量*/
varurlGetUserInfoVOById="sample/getUserInfoVOById.action";
varurlGetAllUserInfoVO="sample/getAllUserInfoVO.action";
/*定义Ext组件相关*/
/*
*==================sampleFormPanel==================
*/
varsampleFormPanel=newExt.FormPanel({
//表单属性定义
});
/*
*==================sampleGridPanel==================
*/
varsampleGridNoPageing=newExt.grid.GridPanel({
//表格属性定义
});
/*普通函数*/
/*Ext组件事件处理函数*/
});
1.JS文件格式以及JS程序规范
表单FormPanel
输入:
json格式数据
输出:
填充json数据到表单相关字段上
表格GridPanel
输入:
json格式数据
输出:
将json数据中各记录填充到表格相关行上
2.表单FormPanel相关
varsampleFormPanel=newExt.FormPanel({
frame:
true,//不加表单会很丑陋
title:
'Ext表单FormPanel示例',
labelAlign:
'right',//定义表单各个字段标题靠右对齐
labelWidth:
85,//定义表单各个字段标题长度
autoHeight:
true,//高度自动
autoWidth:
true,//宽度自动
monitorValid:
true,//开启浏览器端表单信息基本验证
collapsible:
true,//表单面板可折叠
titleCollapse:
true,//点击表单标题栏折叠表单面板
reader:
newExt.data.JsonReader({
root:
'data'
},fieldArray),//定义表单从后台读取的json数据格式
items:
[],//定义表单内各个元素
buttons:
[{
text:
'载入数据',
handler:
function(){
sampleFormPanel.getForm().load({
url:
urlGetUserInfoVOById,
waitMsg:
'Loading...'
});
}
},{
text:
'提交数据',
type:
"submit",
disabled:
true,//先将按钮设置为不可使用
formBind:
true,//设置按钮与表单绑定,需在表单验证通过后才可使用
handler:
function(){
sampleFormPanel.getForm().submit({
waitMsg:
'正在提交...',
url:
urlDoInsertUserInfo,
success:
function(form,action){
Ext.MessageBox.alert('成功');
},
failure:
function(form,action){
Ext.MessageBox.alert('失败',
action.result.msg);
2.1.定义FormPanel各个基本属性
}
},{
text:
'重置',
type:
"reset",
handler:
function(){
sampleFormPanel.getForm().reset();
}
}
],//定义表单的按钮
renderTo:
"sampleFormLocation"
});
2.2.FormPanel的重要属性:
reader
假设后台传来的json数据格式为:
varfieldArray=['id','name','birthDate','bonus','type'];
varsampleFormPanel=newExt.FormPanel({
reader:
newExt.data.JsonReader({
root:
'data'
},fieldArray),
items:
[{
//基本的文本框控件
xtype:
'textfield',
fieldLabel:
'姓名',
name:
'name'
},{
//已扩展的下拉框控件,提交时采用hiddenName
xtype:
'myComboBox',
fieldLabel:
'类型',
name:
'type',
hiddenName:
'userInfoVO.type',
url:
urlGetUserTypeVO
}],
//其他属性定义
});
{"data":
[{"type":
"R1","bonus":
"20000.0","name":
"章日纬","id":
"1","birthDate":
"1982-01-01"}]}
items:
[{
layout:
'column',//纵向划分,按照columnWidth确定几列
defaults:
{
columnWidth:
.33,//每一列占33%,2列.5,四列.25,以此类推
layout:
'form',//横向划分
defaults:
{
xtype:
'textfield',//文本框类型
anchor:
'95%'//根据窗口大小自动调整文本框的宽度
}//定义表单里元素的默认属性
},
items:
[{
items:
[{
fieldLabel:
'票据包编号',
name:
'code'
},{
fieldLabel:
'所属合同号',
name:
'contractNo'
}]
},//第一列
{
items:
[{
xtype:
'datefield',
fieldLabel:
'分包到期日',
name:
'expDate'
},{
fieldLabel:
'票据张数',
name:
'billCount'
}]
},//第二列
{
items:
[{
fieldLabel:
'总金额',
name:
'totalAmt'
},{
fieldLabel:
'实划金额',
name:
'totalRealAmt'
}]
}//第三列
]}]
2.3.FormPanel的元素布局
sampleFormPanel.getForm().load({
url:
urlGetUserInfoVOById,
waitMsg:
'正在装载...'
});//必须定义FormPanel的reader属性
2.4.FormPanel数据的载入和提交
数据的装载:
sampleFormPanel.getForm().submit({
waitMsg:
'正在提交...',
params:
{
‘param1’:
xxx,
‘param2’:
yyy
},//附加表单以外的数据一并提交
url:
urlDoInsertUserInfo,
success:
function(form,action){
Ext.MessageBox.alert('成功');
},
failure:
function(form,action){
Ext.MessageBox.alert('失败',
action.result.msg);
}
});
数据的提交:
2.5.三种类型的表单
2.5.1单纯用于提交数据到后台的表单
该种表单不需要定义reader属性,表单里各元素name属性必须设置为’xxxVO.attribX’
2.5.2单纯用于显示后台传来数据的表单
需定义reader属性:
varfieldArray=['id','name','birthDate','bonus','type'];
reader:
newExt.data.JsonReader({
root:
'data'
},fieldArray);
表单里各元素name属性只需设置为’attribX’
2.5.3更新数据类的表单
需定义reader属性:
varparamsArray=['id','name','birthDate','bonus','type'];
varfieldArray=$.map(paramsArray,function(n){
return{
name:
'xxxVO.'+n,
mapping:
n
}
});
reader:
newExt.data.JsonReader({
root:
'data'
},fieldArray);
表单里各元素name属性必须设置为’xxxVO.attribX’
3.表格GridPanel相关
varsampleGrid=newExt.grid.GridPanel({
title:
'Ext表格GridPanel示例-不使用分页',
store:
gridStore,//表格的数据源
cm:
gridCm,//表格的列定义
sm:
sm,//表格的多选框
autoHeight:
true,//高度自动
autoWidth:
true,//宽度自动
loadMask:
true,//载入数据时显示默认载入图片
collapsible:
true,//表格面板可折叠
titleCollapse:
true,//点击表格标题栏折叠表格面板
tbar:
[{
text:
'新增',
tooltip:
'新建用户',
iconCls:
'hermes-grid-add',//项目自定义的图片
handler:
function(){
alert('新增');
}
},'-',{
text:
'修改',
tooltip:
'修改用户信息',
iconCls:
'hermes-grid-edit',
handler:
function(){
alert('修改');
}
}],//定义表格的工具栏
renderTo:
'sampleGridLocation'
});
3.1.定义GridPanel的各个基本属性
varfieldArray=['id','name','birthDate','bonus','type'];
vargridStore=newExt.data.Store({
url:
"getData.action",
reader:
newExt.data.JsonReader({
root:
'data',//默认
totalProperty:
'totalCount',//分页时候使用,本次查询记录总数
id:
'id'//能区分每条记录的字段
},fieldArray)
});
3.2.GridPanel的重要属性之一:
store
varsm=newExt.grid.CheckboxSelectionModel();
vargridCm=newExt.grid.ColumnModel([
sm,//checkBox
newExt.grid.RowNumberer(),//自动序号
{
header:
"id",
width:
75,
dataIndex:
'userInfoVO.id',
hidden:
true,
hideable:
false
},{
header:
"姓名",
dataIndex:
'name',
width:
100,
sortable:
true
},{
header:
"用户类型",
dataIndex:
'type',
width:
100,
sortable:
true
},{
header:
"生日",
dataIndex:
'birthDate',
width:
100,
sortable:
true
}]);
3.3.GridPanel的重要属性之二:
cm
varsm=newExt.grid.CheckboxSelectionModel();
//遍历选中的记录
$.each(sm.getSelections(),function(i,n){
//n代表表格一条记录
alert(n.get(‘name’));//使用n.get()获得一条记录的某个字段
});
3.4.GridPanel的重要属性之三:
sm
gridStore.load();
或者通过新的action得到数据
gridStore.load({
url:
’newUrl’
});
或者添加一些额外的参数
gridStore.load({
params:
{
‘param1’:
xxx
}
});
3.5.GridPanel的数据装载
没有加checkbox的情况下,即需遍历表格所有记录时:
vararr=[];
sampleGrid.getStore().each(function(n){
arr.push(n.get(‘name’));//取出需要提交的字段放入数组中
arr.push(n.get(‘id’)+‘,’+n.get(‘rateAmt’));//或者将一条记录中的多个字段以逗号隔开放入数组中
});
使用checkbox的时候,即仅提交选中记录相关数据的时候:
//遍历选中的记录
$.each(sampleGrid.getSelectionModel().getSelections(),function(i,n){
//n代表表格一条记录
alert(n.get(‘name’));//使用n.get()获得一条记录的某个字段
});
3.6.GridPanel的数据提交(一般不提交所有的表格信息)
1、store的reader定义时需加上totalProperty属性
vargridStore=newExt.data.Store({
url:
"getData.action",
reader:
newExt.data.JsonReader({
root:
'data',//默认
totalProperty:
'totalCount',//分页时候使用,本次查询记录总数
id:
'id'//能区分每条记录的字段
},fieldArray)
});
2、grid定义在底部bbar加上分页工具条PagingToolbar
varsampleGridWithPageing=newExt.grid.GridPanel({
//其他属性定义
bbar:
newExt.PagingToolbar({
store:
gridStore,
displayInfo:
true,
displayMsg:
'记录{0}-{1}of{2}',
emptyMsg:
"没有符合条件的记录"
})
});
3、装载数据的时候调用:
gridStore.load({
params:
{
start:
0,//显示从第1条开始的记录,必须
limit:
10//分页大小,必须
//其他参数
}
});
3.7.GridPanel分页支持
varwinCustomerUpdate=null;
if(!
winCustomerUpdate){
winCustomerUpdate=newExt.Window({
title:
'更新企业客户信息',
layout:
'fit',
closeAction:
'hide',//关闭窗口仅隐藏
height:
330,
width:
700,
plain:
true,
modal:
true,
items:
customerUpdateFrom//可以放置表格表单等
});
}
winCustomerUpdate.show();
customerUpdateFrom.getForm().load();
4.弹出窗口相关(限制只能弹出一级窗口)
{
xtype:
'mycombo',
url:
"getXXX.action",
fieldLabel:
'客户类型',
hiddenName:
'organizationCustomer.customerType',
listeners:
{
select:
{
fn:
function(combo,record,index){
//todowithcombo.getValue()
}
},
//其他事件处理定义
}
}
5.Ext组件事件处理的添加
6.扩展的Ext组件使用
6.1.myComboBox
{
//已扩展的下拉框控件,提交时采用hiddenName
xtype:
'myComboBox',
fieldLabel:
'类型',
name:
'userInfoVO.type',
hiddenName:
'userInfoVO.type',
enableBlank:
true,//允许空值
url:
”getXXX.action”//与数据字典相结合
}
6.2.myNumberField
{
//已扩展的金额输入框控件,输入金额显示中文金额
xtype:
'myNumberField',
fieldLabel:
'奖金',
name:
'userInfoVO.bonus'
}
6.3.myHiddenField
{
//隐藏框控件,用于占位
xtype:
'myHiddenField'
}
$.ajax(
url:
‘xxx.action’,
data:
{
param1:
xxx
},
callback:
function(json){
if(json.data.success){
}
else{
}
},
type:
’json’);
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Ext 教程