文档章节

Ext.form.ComboBox 传值问题

learn_more
 learn_more
发布于 2015/01/13 23:00
字数 581
阅读 1445
收藏 1

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


© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
ExtJS combobox 本地使用

var data= [['菜单','0'],['功能','1']];var store = new Ext.data.SimpleStore({fields :['text','value'],data : data}); var combo = new Ext.form.ComboBox({fieldLabel :'节点类型',nam......

Element0506
2014/05/18
472
0
Ext 表单与输入控件 下拉框

1,需要引入的 <link rel="stylesheet" type="text/css" href="../../ext-3.2.1/resources/css/ext-all.css"/> <script type="text/javascript" src="../../ext-3.2.1/adapter/ext/ext-base......

菜鸟来了
2014/11/04
24
0
在ExtJS的ComboBox组件中实现下拉树效果

看了很多关于EXT下拉树的实现, 发现很多例子都是对EXT原有的类进行扩展, 而且都发现用起来很费劲,在这里,本人实现的EXT下拉树是直接使用 Ext.form.ComboBox + Ext.tree.TreePanel, 将两者结...

itwriter
2014/03/19
949
2
关于ext3.4版本的,gridpanel中,第一列的返回值如果是false,那么第二列处于只读状态,否则,第二列可以选择下拉框里面的值

{ header: '是否锁定', align: 'center', width: 242, dataIndex: 'isLock', renderer: function (v) { if (v == 0) { isLockData = false; return '否' } else if (v == 1) { isLockData =......

echo_s
2016/12/26
141
2
ext combox 显示出错问题

this.searchCountOperatorsCobo = new Ext.form.ComboBox({ // id :'search_count_operators_id', // width : 300, // hiddenName : 'rankInfoVo.searchCountOperators', fieldLabel : "搜索......

vitou
2013/10/30
176
1

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部