Ext.form.ComboBox 传值问题

原创
2015/01/13 23:00
阅读数 3.8K

开发过程中,我们经常使用如下的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的一维值,组件初始化时默认选中哪一个。


展开阅读全文
打赏
1
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部