欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ext.form.ComboBox 传值问题

程序员文章站 2022-07-13 22:29:41
...

开发过程中,我们经常使用如下的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