Extjs 下拉框

末蓝、 2022-08-12 02:59 283阅读 0赞

刚刚熟练了easyui控件的使用，又开始了现在的这个项目。这个项目是个半成品，前端使用的是Extjs控件，jsp中没有代码，就引用了很多的js。。。于是乎有种不知所措了呀。。。

说实话特别的不想去看那些代码，第一是不熟悉，第二是太乱没条理，还有一个原因界面连html不想看又不行，公司要做这个项目，你又不能跟公司领导说我不会，，所以还是硬着头皮看了一天。

大概了解后，就开始copy，past，将原模块中js原封不动的考到了jsp页面，于是乎就这样运行起来了，只不过调用的不是我自己的方法。后台业务简单啊，一会儿就把后台弄好了，然后将界面js中的url路径改为自己的。到现在为止，界面是有了，文本框下拉框也都出来了，界面也就这些控件。

extjs中文本框相对下拉框简单多了，下拉框涉及到赋值，是动态赋值还是静态赋值。下面就来介绍一下下拉框的这两种赋值。

1，静态赋值。如性别下拉框

代码如下：

<span style="font-size:18px;">          new Ext.form.ComboBox({
          		name : 'usersex_id',
          		id : 'usersex_id',
        		hiddenName : 'usersex_id',
        		typeAhead : true,
        		triggerAction : 'all',
        		lazyRender : true,
        		mode : 'local',
        		store : new Ext.data.ArrayStore({
        					fields : ['value', 'text'],
        					data : [["1", '男'], ["2", '女']]
        				}),
        		valueField : 'value',
        		displayField : 'text',
        		emptyText : '请选择性别',
        		editable : false,
        		selectOnFocus : true,
        		width : 85
            	})</span>

其中store项中data数组为下拉框的内容，emptyText为下拉框为空时提示的信息

显示结果如下图所示：

![SouthEast][]             ![SouthEast 1][]

2，动态赋值

代码如下：

<span style="font-size:18px;">//获取数据
    var userSexStore = new Ext.data.Store({
    		proxy : new Ext.data.HttpProxy({
    					url : '。。。。。。'
    				}),
    		reader : new Ext.data.JsonReader({}, [{
    							name : 'value'
    						}, {
    							name : 'communityname'
    						}]),
    		listeners : {
    			// 设置远程数据源下拉选择框的初始值
    			'load' : function(obj) {
    				
    			}
    		}
    	});
    
    	userSexStore.load();
    
    
    //下拉框
     new Ext.form.ComboBox({
    				hiddenName : 'usersex_id',
    				name:'usersex_id',
    				id:'usersex_id',
    				emptyText : '请选择，，，',
    				triggerAction : 'all',
    				store : userSexStore,
    				displayField : 'text',
    				valueField : 'value',
    				mode : 'local', // 数据会自动读取,如果设置为local又调用了store.load()则会读取2次；也可以将其设置为local，然后通过store.load()方法来读取
    				editable : false,
    				anchor : '100%'
    		     })</span>

通过url返回的结果是“ \[\["1", '男'\], \["2", '女'\]\]”格式的数据，使用动态赋值时，一定要设置ComboBox的hiddenName属性，triggerAction：‘all’ 属性的作用下拉框多个值时选中一个其他的项不会丢失，不设置此属性其他项会丢失。

Extjs还在继续学习中，还是那句话就copy past吧，若只是想它难，那么它就真的难了，着手去做，做出来了也就不难了。。。。

[SouthEast]: https://img-blog.csdn.net/20140917163738469?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlzaHVhbmd6aGU3MDQ3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220810/6c6e9b155f9b4bd590f53122d7fe9873.png