Extjs 下拉框

Posted 2020-10-02 wzzkaifa

  刚刚熟练了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为下拉框为空时提示的信息 

显示结果例如以下图所看到的：

                                                                        

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吧。若仅仅是想它难。那么它就真的难了，着手去做，做出来了也就不难了。。。

。