标签封装.docx
《标签封装.docx》由会员分享，可在线阅读，更多相关《标签封装.docx（43页珍藏版）》请在冰豆网上搜索。
标签封装
1.表格单击或双击弹出明细窗口:
ExtShowGridDetailEvent1
2.表格封装标签（*）:
grid4
3.图标签:
fusion7
4.封装块:
htmlfieldset\extAdvancedOptions9
4.1htmlfieldset:
9
4.2extAdvancedOptions:
10
5.封装块联动事件标签:
extevent11
6.相关功能连接标签:
ExtRelatedFunction12
7.基本组件标签13
7.1基本类型：
textfield\textarea\combox（单选下拉菜单）\mcombox（多选下拉菜单）\datefield13
7.2对选框、tab页：
13
8.ajax异步请求及异步刷新问题15
8.1ajax异步请求使用方法：
15
8.2绑定数据源的异步加载方式：
16
附录一：
封装标签及异步测试页面19
附录二：
封装标签测试功能脚本配置22
1.表格单击或双击弹出明细窗口:
ExtShowGridDetailEvent
a）标签名称：
ExtShowGridDetailEvent,
b）标签功能描述：
该标签用于对表格的行击或单元格击事件监听触发弹出明细的窗口的功能。
示例原始脚本：
Ext.getCmp（"grid"）为表格控件
Ext.getCmp（"grid"）.on（'rowdblclick',function（th,rowIndex,e）{
if（undefined==Ext.getCmp（'grid_window'+rowIndex）||null==Ext.getCmp（'grid_window'+rowIndex））{
newExt.Window（{
id:
'grid_window'+rowIndex,
title:
'grid_window',
height:
300,
width:
330,
buttonAlign:
'center',
buttons:
[],
titleCollapse:
true,
closable:
true,
collapsible:
true,
closeAction:
'hide',
shadow:
true,
items:
[{}]
}）;
Ext.getCmp（'grid_window'+rowIndex）.show（）;
}
else{
if（Ext.getCmp（'grid_window'+rowIndex）.hidden）{
Ext.getCmp（'grid_window'+rowIndex）.show（）
}
else{
Ext.getCmp（'grid_window'+rowIndex）.hide（）
}
}
}）;
功能效果图展示：
c）标签属性：
gridid:
被监听的表格的id,必须
clickType:
双击或者单击，即'click'\'dbclick'，默认双击，dbclick
rowOrcell:
监听行或者监听单元格，即'row'\'cell'，默认监听行，row
openWindowType:
弹出窗口的类别,默认为window,即弹出普通的窗口,可选值:
window\iframe,前者时,弹出的控件全在本页,后者时弹出窗口加载iframe;
url:
弹出窗口加载的内嵌页的地址,此属性在openWindowType为iframe时有用
params:
此属性在openWindowType为iframe时有用,即向内嵌请求传递的参数.格式如:
"name;chartData:
12",此时将自动向内嵌请求传递当前表格行的name字段的值，以及自定义属性值chartData值为12。
showCondition:
窗口弹出的条件，必须是值是false或true的变量或表达式，如showCondition=‘true’或showCondition=‘Ext.getCmp（"grid"）.getStore（）.getAt（row）.get（"_is_leaf"）==false’,又如：
showCondition=‘cell==2’即仅坐标为2的列可以弹出窗口
title:
弹出的窗口的title
autoHeight:
窗口高度是否自动增加，默认true，如果设置了height，则该项无效
width:
窗口宽度，默认400
buttons:
窗口的按钮，脚本是“buttons:
[b1,b2]”格式，可以是实际的定义也可以是变量名字，默认为[]
itemsShowConditions:
默认的情况下将所有的控件全显示，但也可以指定满足条件时该控件才显示，如：
itemsShowConditions=‘0：
null!
=Ext.getCmp（"grid"）.getAt（row）.get（"rate"）&&Ext.getCmp（"grid"）.getAt（row）.get（"rate"）>=0;1:
Ext.getCmp（"grid"）.getAt（row）.get（"rate"）<0’如此则意味着itemsShowConditions中的0条件为true则window中第0个控件显示，否则不显示，1条件为true则第一个控件显示；
collapsible:
是否可以展开，默认true，可以收缩展开
x：
显示的window的横坐标位置，默认当中显示；
y:
显示的window的纵坐标位置，默认当中显示；
autoScroll：
是否允许滚动条，默认为true；
showFunction:
当window显示的时候调用的函数，如：
showFunction='myfunction（1,2,3）',即相当于以上示例脚本中Ext.getCmp（'grid_window'+rowIndex）.show（）；后执行myfunction（a,b,c）；所以也可以这样写：
showFunction='vara=10;…',即直接写执行的脚本
hideFunction:
当window隐藏时调用的方法，与showFunction效果一样。
（注意：
row:
行击时，表格单击的行坐标。
cell:
当监听单元格时，单元格的列坐标，此项在rowOrcell为row时无效
itemsId:
array类型，存放了窗口的控件的id，引用方式如：
itemsId[0]即返回第0个控件的id,此属性在openWindowType为window时有效
在调用showFunction中的函数，或执行语句时，可以使用局部变量row和cell，如showFunction='myfunction（row,2,3）',即调用myfunction时，将row的值作为参数使用）
d）标签使用示例：
ExtShowGridDetailEventgridid='grid'>
ExtShowGridDetailEvent>
Varsss;
ExtShowGridDetailEventgridid='grid'showFunction='alert（"OK!
"）;myfunction（cell,sss）'>
ExtShowGridDetailEvent>
/*这是在标签外面定义的一个js函数*/
functionmyfunction（cellIndex,val）{
………….
}
再举一例：
ExtShowGridDetailEventgridid='grid'showFunction='alert（"OK!
"）;myfunction（cell,45）'>
，
items>
gridgridData="gridData2"stripeRows='true'height='300'id='gridDetail'
title="表格2">
grid>
items>
ExtShowGridDetailEvent>
2.表格封装标签（*）:
grid
a）标签名称：
grid
b）标签功能描述：
该标签用于生成
基本表格、
折叠表格、
固定行动态列表格（列按组动态增加）、
动态行动态列表格
表格类型分别为：
1、3、4、5
表格的数据类型:
目前支持数据类型：
1：
字符串；4：
数值；5：
排序插图；6：
大文本字符串
c）表格属性介绍：
Name：
表格name,非必须；
Collapsible：
允许表格展开和收缩，默认为true，允许展开；
Structure：
表格列定义，该项从后台获取；
dataObject：
表格数据，该项从后台获取；
id:
表格id；必须；
defaultSortField:
表格默认分类字段；
stripeRows:
readType:
selectType:
//当该值为‘check’时，表格左侧存在勾选框列
height:
width:
bbar:
renderTo:
title:
tbar:
gridData:
gridType:
forceFit:
//当该属性为false的时候，可以设置自定义的宽度
singleSelect:
当selectType为'check'时，是否允许多选的按钮
buttons:
buttonAlign:
url:
cellImgPath:
表格单元格渲染为图时，渲染的图的路径
d）表格分类型说明：
使用示例：
1.
--这是一个普通表格-->
gridgridData="gridData2"stripeRows='true'height='300'id='grid2'
title="表格2"renderTo="grid3">
grid>
数据库的data类型为List
2.
--这是一个treegrid,具有插图效果-->
gridgridData="gridData1"stripeRows='true'height='300'id='grid'
title="表格1"renderTo="grid2"cellImgPath="../../resources/images">
grid>
后台如：
BaseTreeStorebts=newBaseTreeStore（）;
ExtDemobaseTree=newExtDemo（）;
ListbtsList=newArrayList（）;
bts=newBaseTreeStore（）;
baseTree=newExtDemo（）;
baseTree.setId（"1"）;
baseTree.setText（"根"）;
baseTree.setRight（"0"）;
baseTree.setName（"中国"）;
bts.id="1";
bts.obj=baseTree;
btsList.add（bts）;
//
bts=newBaseTreeStore（）;
baseTree=newExtDemo（）;
baseTree.setId（"2"）;
baseTree.setText（"枝1"）;
baseTree.setRight（"0"）;
bts.id="2";
bts.pid="1";
bts.obj=baseTree;
baseTree.setName（"北京"）;
baseTree.setValue（"1"）;
btsList.add（bts）;
//
bts=newBaseTreeStore（）;
baseTree=newExtDemo（）;
baseTree.setId（"3"）;
baseTree.setText（"枝2"）;
baseTree.setRight（"0"）;
baseTree.setName（"beijinUnivercity"）;
baseTree.setValue（"2"）;
bts.id="3";
bts.pid="1";
bts.obj=baseTree;
btsList.add（bts）;
//
bts=newBaseTreeStore（）;
baseTree=newExtDemo（）;
baseTree.setId（"4"）;
baseTree.setText（"枝枝1"）;
baseTree.setRight（"0"）;
baseTree.setName（"上海"）;
baseTree.setValue（"3"）;
bts.id="4";
bts.pid="2";
bts.obj=baseTree;
btsList.add（bts）;
//
bts=newBaseTreeStore（）;
baseTree=newExtDemo（）;
baseTree.setId（"5"）;
baseTree.setText（"枝枝2"）;
baseTree.setRight（"0"）;
baseTree.setName（"复旦大学"）;
baseTree.setValue（"4"）;
bts.id="5";
bts.pid="4";
bts.obj=baseTree;
btsList.add（bts）;
bts=newBaseTreeStore（）;
baseTree=newExtDemo（）;
baseTree.setId（"6"）;
baseTree.setText（"枝2枝1"）;
baseTree.setRight（"0"）;
baseTree.setName（"复旦文学院"）;
baseTree.setValue（"5"）;
bts.id="6";
bts.pid="3";
bts.obj=baseTree;
btsList.add（bts）;
TreeUtiltreeUtil=newTreeUtil（）;
treeUtil.getAllTree（btsList）;
//treeUtil.getTreeList（）;
//调用表格数据代理类得到表格数据map
gridData1=FeExtGridDataProxy.getGridData（"UCFESA999999","1",1,
（Map）this.getFEOSA_UI_INFO_MAP（）!
=null?
（Map）this
.getFEOSA_UI_INFO_MAP（）.get（"__BUSI"）:
null,treeUtil
.getTreeList（））;
ExtDemo：
publicclassExtDemoextendsBaseTree{
privateStringname;//前台某列
privateStringvalue;//前台某列
publicStringgetName（）{
returnname;
}
publicvoidsetName（Stringname）{
this.name=name;
}
publicStringgetValue（）{
returnvalue;
}
publicvoidsetValue（Stringvalue）{
this.value=value;
}
}
3.图标签:
fusion
3.1标签使用方式：
fusionid=''ftype="MSLine"fvalue="fvalue"height="300"
border="true"collapsible="false">
fusion>
3.2
后台数据处理：
fvalue=newHashMap（）;
List
//需要显示项目
String[]items=newString[3];
items[0]="COUNTCAPITALFLOWIN";//item1的名字
items[1]="COUNTSECURITIESFLOWOUT";//item2的名字
items[2]="THISYEARRATE";//item3的名字
chartList.add（items）;
String[][]values=newString[3][4];
for（inti=0;i<3;i++）{
values[i][0]=""+i*10;//横坐标
values[i][1]=""+i*100;//item1的纵坐标值
values[i][2]=""+i/10;//item2的纵坐标值
values[i][3]=""+i*1000;//item3的纵坐标值
}
chartList.add（values）;
fvalue.put（FChartTypes.CHART_DATA,chartList）;
Mapm=newHashMap（）;
m.put（FChartTypes.FCHART_TITLE,""）;//主标题
m.put（FChartTypes.FCHART_SUBTITLE,""）;//副标题
m.put（FChartTypes.FCHART_X,"CHART_XXX"）;//貌似没用，可以自己试一试
m.put（FChartTypes.FCHART_Y,"CHART_YYY"）;
fvalue.put（FChartTypes.CHART_PRI,m）;
3.3属性介绍：
//fusionchart参数
privateStringftype;//模板类型
privateStringfstyle;//图形风格编号，目前基本没有用
privateStringfvalue;//后台的数据对象名字
//ext对象参数
privateStringheight;
privateStringwidth;
privateStringid;
privateStringcollapsible;//是否可展缩
privateStringfloating;//是否可浮动,默认不可以浮动
privateStringautoScroll;//滚动条
privateStringautoMask;//autoMask,默认不显示
privateStringrenderTo;//渲染到指定的dom节点
privateStringborder;
privateStringtbar;//上部工具吧
privateStringtitle;
//图的异步刷新方式：
combox:
以下拉菜单选择的方式进行异步刷新；menu:
以菜单的形式进行异步刷新；
privateStringajaxType;//选择ajax刷新的类型
privateStringurl;//异步刷新的地址
privateStringparams;//自定义参数（不建议使用）
privateStringsuccess;//异步刷新成功时的回调函数（不建议使用）
privateStringfailure;//异步刷新失败时调用的函数
privateStringfusionDefinition;//后台定义的异步初始化数据对象的名字，数据对象的类型是：
FusionChartObj
3.4图demo：
https:
//192.168.16.8:
443/svn/FE/1workarea/yuliangjun/FusionCharts_Evaluation
4.封装块:
htmlfieldset（常用封装块）\extAdvancedOptions（高级选项）
4.1htmlfieldset:
标签htmlfieldset实际上仅仅是封装了一种布局，标签htmlfieldset按照其type的取值不同而具有不同的布局:
a）type默认值,即无值的时候，此时标签将按照参数param的值将param的控件按每行2个自动排列
如:
--将params[1]中的空间自动排列-->
htmlfieldsetparam="params[1]"title="按照控件配置自动扩展">
htmlfieldset>
效果：
b）type取date3：
--这是第一类评估日期块，即一般评估日期块-->
htmlfieldsetparam="params[0]"title="评估日期"type="date3"buttonId="b"
buttonName="查询"buttonType="submit">
htmlfieldset>
效果如：
C）type取date2:
--第二类评估日期块，包括一般评估日期块和两个用于比较的日期控件-->
htmlfieldsetparam="params[2]"title="评估日期"type="date2"buttonId="b"
buttonName="查询"buttonType="submit">
htmlfieldset>
效果如：
d）type取order：
--将params[4]中的控件按排名封装块的布局排列-->
htmlfieldsetparam="params[4]"type="order"title="排名顺序封装块"
fromBegin="排名前"fromEnd="名">
htmlfieldset>
效果如：
e）标签属性介绍：
privateStringparam;//该属性说明该布局作用作用的组件块
privateStringtitle;//该封装的标题
privateStringtype;//该布局的类型
privateStringbuttonName;//对于date2\date3类型
升级会员 