Ext의 ComboBox에 대한 id,name,hiddenName

Ext에서ComboBox의 id,name,hiddenNameExt에서의Combobox에 대해 일반적인 의미의표를 렌더링하는 대신div+INPUT로 쌓은 한 무더기의 양식 집합체를 다시 사용합니다. 그것에 대한 호출은 전통적인 의미의select와 완전히 다르기 때문에 이 문제는 하루가 지났습니다. 한 머리가 두 개로 커졌고 그것들의 구체적인 작용을 측정할 수 있었습니다.우선: ComboBox에서 읽은 두 개의 스토어 속성 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 값이 표시된 의 속성인가?테스트를 위해 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 값을 지정했더라도,combox에 있습니다.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/