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

ExtJS 动态、静态设置ext:field/ext:combbox隐藏

2015-06-12 00:00 676 查看
最近今天一直在改前台的代码,部分field和combbox需要根据后台传的type值判断是否需要显示。

前端代码

String type= (String)request.getAttribute("type");


<ext:fieldSet name="innerForm" id="innerForm" region="center" layout="column" height="110" labelWidth="50" labelAlign="right" style="border-width: 0px;">
<ext:component layout="form" labelWidth="90" labelAlign="right" defaultType="textfield" style="padding:10px;" width="175" columns="1">
<ext:combbox fieldLabel="派单后时间:"   name="transportedTimeExp"   dataArray="[[1,'<'],[2,'>'],[3,'=']]" width="50" ></ext:combbox>
<ext:combbox name="totalAmountExp" dataArray="[[1,'<'],[2,'>'],[3,'=']]" fieldLabel="订单金额:" width="50"></ext:combbox>
</ext:component>
<ext:component layout="form" labelWidth="1" labelAlign="right" defaultType="textfield"  style="padding:10px;" width="85" columns="1">
<ext:field name="transportedTime" id="transportedTime" fieldLabel="" width="50"></ext:field>
</ext:fieldSet>
<ext:form name="mainForm" id="mainForm" region="center" tbar="menuBar">
<ext:fieldSet name="baseInfoForm" id="baseInfoForm" region="center" layout="form" labelWidth="80" labelAlign="right" style="border-width: 1px;margin:5px;" width="378" title="规则设置">
<ext:combbox fieldLabel="订单状态:"  name="orderStatus" dataArray="[['0','请选择'],['109','待审核'],['111','派单中'],['106','备餐中'],['108','送出'],['113','取消审核']]" width="250" defaultValue="0"></ext:combbox>
<ext:panel name="innerPart" id="innerPart" layout="fit" items="innerForm" width="380"></ext:panel>
<ext:field targetName="role"></ext:field>
<ext:field targetName="radioGroup" id="radioGroup"></ext:field>
<ext:field fieldLabel="备注:" name="comments"  id="comments" xtype="textarea" width="250" height="75" value=""></ext:field>
</ext:fieldSet>
</ext:form>


静态隐藏

<ext:fieldSet hidden="true" name="innerForm" id="innerForm" region="center" layout="column" height="110" labelWidth="50" labelAlign="right" style="border-width: 0px;">
<ext:component hidden="true" layout="form" labelWidth="1" labelAlign="right" defaultType="textfield"  style="padding:10px;" width="85" columns="1">
<ext:field xtype="hidden" name="transportedTime" id="transportedTime" fieldLabel="" width="50"></ext:field>
<ext:field name="statusUpdateTime" id="statusUpdateTime"  fieldLabel="" width="50"></ext:field>
<ext:field name="totalAmount" id="tota
3ff0
lAmount" fieldLabel="" width="50"></ext:field>
<ext:field name="updateTimes" id="updateTimes" fieldLabel="" width="50"></ext:field>
</ext:component>
</ext:fieldSet>


动态隐藏

隐藏ext:combbox,直接用id属性设置transportedTimeExp.getEl().up(".x-form-item").setDisplayed(false);

transportedTimeExp是combbox的id属性值。

隐藏ext:field,不能直接用id属性像上面那样隐藏,需要获取field上层ext:form对象在对field隐藏,例如:

mainForm.getForm().findField("transportedTime").getEl().up(".x-form-item").setDisplayed(false);

mainForm是field上层form的id属性值,transportedTime是field的id属性值。

if(type == "ORDER_WARN"){
transportedTimeExp.getEl().up(".x-form-item").setDisplayed(false);
mainForm.getForm().findField("transportedTime").getEl().up(".x-form-item").setDisplayed(false);
orderStatus.store.loadData(<%=orderStatuList%>); //动态设置combbox选值
}


好博客分享:http://www.cnblogs.com/hannover/archive/2011/01/08/1930889.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ext combbox field 隐藏