Ext.form.ComboBox 传值问题

2019独角兽企业重金招聘Python工程师标准>>>

开发过程中，我们经常使用如下的html，当表单提交时，传入的值是text对应的value

<select id=”comobo”>
<option value=”value1″>text1</option>
<option value=”value2″>text2</option>
<option value=”value3″>text3</option>
<option value=”value4″>text4</option>
</select>

使用 Ext.form.ComboBox 进行模仿

var comb  = new Ext.form.ComboBox({
	name:"operation",
	store:[['1','insert'],['2','update'],['1','query'],['1','delete']],
	displayField:'name',
	hiddenName:'process',
	value:'1',
	mode: 'local',
	triggerAction: 'all',
	editable:false,
	readOnly: true
})

如上代码在页面html中会渲染成如下：

<div id="ext-gen279" class="x-form-field-wrap x-trigger-wrap-focus" style="width: 80px;">
<input id="process" type="hidden" name="process" value="1"/>

<input id="operation" name='operation' class="x-form-text x-form-field x-form-focus" type="text" autocomplete="off" size="24" readonly="true" style="width: 55px;"/>

<img id="ext-gen280" class="x-form-trigger x-form-arrow-trigger" src="http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif"/>
</div>

从代码可以看到，一个Ext.form.ComboBox被渲染成html主要分为三部分：

    1）隐藏域，这个hiddenName最关键，开发中就是因为少了这个属性，提交给后台总是store的二维值，也就是文本值。

    2）一个 input 标签 text 类型 ， 这个不会提交给后台，只是为了模仿HTML的效果而已。

    3）图片，这个很好理解，为了更好的兼容所有浏览器，用图片做效果是最好的。

总结：

    1）store 用一个数组存储数据源，数组里面每一个对象也是数组，这个数组默认一维是value，二维是text。也就是展现页面的是二维值，传给后台的是一维的值。

    2）hiddenName 属性最为重要，从生成的HTML可以看到，实际上是提交 process=1，提交给后台的是以hiddenName指定的值和store的一维值。如果没有hiddenName，那么HTML也不会有

<input id="process" type="hidden" name="process" value="1"/>

  那么，提交给表单的永远是name指定的值和二维的值，也就是：operation=insert。

    3）name：没什么作用，但是可以从生成的HTML中看到，他还是定义了一个input。另外，我们可以通过父组件的find寻找。

    4）value：这个值是store的一维值，组件初始化时默认选中哪一个。

转载于:https://my.oschina.net/heweipo/blog/367381