关于Ext中ComboBox的id,name,hiddenName

关于Ext中ComboBox的id,name,hiddenName
Ext中的ComboBox，并对对一般意义上的<select>表单渲染，而是重新用div+INPUT堆出来的一堆样式集合体，因为对它的调用跟传统意义上的select完全不同，这个问题搞了一天了，一个头变两个大，还好测出来它们的具体作用了。
首 先：ComboBox中的两个读自Store的属性valueField和displayField确实代表了视觉上的“表单”中的值字段和显示字段，这 里要弄明白一点的是，值字段指向的是那个输入框，而显示字段指向的，确是一个隐藏的下拉列表框（其实是一系列的层），因此我们想对一段数据这样操作的时 候： 

var tradeData = [<logic:iterate indexId='opIndex' id='tradelist' name='tradeList' scope='request'>{
 'tradeid' : '<bean:write name="tradelist" property="tradeid"/>',
 'tradename' : '<bean:write name="tradelist" property="tradename"/>'
},</logic:iterate>]
tradeData.pop();
var tradeStore = new Ext.data.JsonStore({
 data : tradeData,
 fields : [
  {name : 'tradeid', type : 'int'},
  {name : 'tradename'}
 ]
});

var trade = new Ext.form.ComboBox({
       store : tradeStore,
       valueField : 'tradeid',
       displayField : 'tradename',
       fieldLabel : '<font color="red">*</font>所属行业',
       labelSeparator : ':',
       id : 'tradeid',
       name : 'tradeid',
       width : 175,
       itemCls : 'form_row',
       typeAhead : true,
       mode : 'local',
       emptyText : '-- 请选择 --',
       triggerAction : 'all',
       vtype : 'isRequire',
       allowBlank : false
});

 
它们对应出来的就是，初值输入框里显示的是"-- 请选择 --"，当单击下拉框时，行业名称会显示出来，而单击某一值后，文本框被赋值，这就是我们视觉上的“选中某值”，看它的HTML源码。 

<DIV class="x-form-item form_row" tabIndex=-1>
<LABEL class="x-form-item-label" style="WIDTH: 125px" for=tradeid>
<FONT color=red>*</FONT>所属行业:</LABEL>
<DIV class="x-form-element" id=x-form-el-tradeid style="PADDING-LEFT: 130px">
<DIV class="x-form-field-wrap " id=ext-gen48 style="WIDTH: 172px">
<INPUT class=" x- form-text x-form-field " id=tradeid style="WIDTH: 155px" size=24 value=家 用电器 name=tradeid autocomplete="off">
<IMG class="x-form-trigger x-form-arrow-trigger " id=ext-gen49 src="http://localhost:8080/logistic/extjs/resources/images/default/s.gif">
</DIV>
</DIV>


我 们看到，当没有赋hiddenName值的时候，ComboBox的id与name值都给渲染到了显示的<input type="text"& gt;上，也即我们看到的文本框，就是tradeid了，这样做的结果与我们的希望显然不同——我们想要的是，显示文字而传输id值。
那么那个 hiddenName值是干什么用的呢？难道也是这个<input>的一个属性？为了测试，我把labelName也设置为了 tradeid，这样，在这个ComboBox的配置中，我将id,name,hiddenName值全部设为"tradeid",这样又输出的是什么 呢？
表现：ComboBox 显示初始化状态，单击下拉框时，正确显示行业名称，但是选择某一值时，文本框内并不被赋予该 值，alert(Ext.get('tradeid').dom.value);显示的结果是我们选中的行业名称，不是行业ID，这个又是咋回事呢？看看 HTML源码： 

<DIV class="x-form-item form_row" tabIndex=-1>
<LABEL class="x-form-item-label" style="WIDTH: 125px" for=tradeid><FONT color=red>*</FONT>所属行业:</LABEL>
<DIV class="x-form-element" id=x-form-el-tradeid style="PADDING-LEFT: 130px">
<DIV class="x-form-field-wrap " id=ext-gen48 style="WIDTH: 172px">
<INPUT class=" " id=tradeid style="POSITION: relative; TOP: 163px" type=hidden value=建材五金 name=tradeid>
<INPUT class=" x- form-text x-form-field x-form-empty- field" id=tradeid style="WIDTH: 155px" size=24 value="-- 请选 择 --" autocomplete="off">
<IMG class="x-form-trigger x-form-arrow-trigger " id=ext-gen49 src="http://localhost:8080/logistic/extjs/resources/images/default/s.gif">
</DIV>
</DIV>


此时有两个id为"tradeid"的input,一个是隐藏的，一个是文本框，文本框内显示的，便是我们看到的初始值，而id和name都为"tradeid"的那个隐藏的表单，则记录了我们选择的结果。
将ID改为其它值，可正常显示了，而且alert(Ext.get('tradeid').dom.value);也得到了正确的行业ID值。 

<DIV class="x- form-item form_row" tabIndex=-1><LABEL class="x-form-item-" label style="WIDTH: 125px" for=trade><FONT color=red>*< /FONT>所属行业:</LABEL>
<DIV class="x-form-element" id=x-form-el-trade style="PADDING-LEFT: 130px">
<DIV class="x- form-field-wrap " id=ext-gen48 style="WIDTH: 172px">< INPUT id=tradeid type=hidden value=4 name=tradeid>< INPUT class=" x-form-text x-form- field " id=trade style="WIDTH: 155px" size=24 value=建材五 金 autocomplete="off"><IMG class="x-form-trigger x-form-arrow-trigger " id=ext-gen49 src="http://localhost:8080/logistic/extjs/resources/images/default/s.gif"></DIV></DIV>


ComboBoxid 指定的id被渲染给了文本框，并且显示的是选择的行业名。而name与hiddenName渲染的，却是隐藏表单，在name指定 为"tradename",hiddenName指定为"tradeid"时，隐藏表单的内容同样为行业ID值。而在当id不指定，name指定为 tradeid，hiddenName指定为tradename时，文本框显示文本，HTML源码id值为系统自动分配，隐藏表单的id与name值均为 tradename，其值为行业名称： 

<DIV class="x-form-item form_row" tabIndex=-1>
<LABEL class="x-" form-item-label style="WIDTH: 125px" for=ext-comp-1001>< FONT color=red>*</FONT>所属行业:</LABEL>
<DIV class="x-form-element" id=x-form-el-ext-comp-1001 style="PADDING-LEFT: 130px">
<DIV class="x-form-field-wrap " id=ext-gen48 style="WIDTH: 172px">
<INPUT id=tradename type=hidden value=5 name=tradename>
<INPUT class=" x- form-text x-form-field " id=ext-comp- 1001 style="WIDTH: 155px" size=24 value=化工 autocomplete="off">< IMG class="x-form-trigger x-form-arrow-trigger " id=ext-gen49 src="http://localhost:8080/logistic/extjs/resources/images/default/s.gif">
</DIV>
</DIV>

再把hiddenName注释，id值设为"trade",name值设为"tradeid"时，正常页面显示，无隐藏表单，文本框id值与name值均为"trade"，值为行业名称。
由此可以推出
ComboBox中的id,name,hiddenName值的作用分别是：
id， 指定渲染后的文本框id与name属性，并且其值对应displayField所定义字段的选中值，特殊情况，当其与hiddenName指定同一名称 后，Ext会将其值渲染到hidden中去，由此可见ComboBox对于hiddenName的操作优先。他两个同名后，displayField所定 义字段的选中值便会被渲染到隐藏表单中。
hiddenName，指定渲染后的隐藏表单中id与name属性，并且其值对应valueField所定义字段中的选中值，此亦为我们所需要的正当提交信息。当且仅当它被指定后，ComboBox才会生成隐藏表单来存储我们的选择信息。
name，不管怎么测都没看出来它有什么用。或许是对象的名称，但在页面显示中不起作用。

因 此我们平时用ComboBox时，只需要指定其hiddenName值便可以正确传值了。而且即便是你指定了其id值，在 comboBox.getForm().getValues(true).replace(/&/g,", ")时也看不到其对应的表单值，里面 显示的，全是用户指定的‘合法表单’内容。
官方API相应说明:
hiddenId : String If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id (defaults to the hidde...
If hiddenName is specified, hiddenId can also be provided to give the hidden field a unique id (defaults to the hiddenName). The hiddenId and combo id should be different, since no two DOM nodes should share the same id.
hiddenName : String If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults t...
If specified, a hidden form field with this name is dynamically generated to store the field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically post during a form submission. Note that the hidden field's id will also default to this name if hiddenId is not specified. The combo's id and the hidden field's ids should be different, since no two DOM nodes should share the same id, so if the combo and hidden names are the same, you should specify a unique hiddenId.
id : String The unique id of this component (defaults to an auto-assigned id).
name : String The field's HTML name attribute (defaults to "").

 本文转自:http://wglnngt-001.blog.163.com/blog/static/4077058420091114114648686/

posted @ 2016-01-20 16:25  huanlegu0426  阅读(953)  评论(0)  编辑  收藏  举报
returnTop $(function(){ $('#returnTop').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); returnfalse; }); });