Extjs3 combobox使用

Posted googlg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Extjs3 combobox使用相关的知识,希望对你有一定的参考价值。

    Combobox 在程序中应用十分普遍,每个combobox的选项 一般对应两个值:一个用于前台显示的值,一个与显示值对应的value值。在后台获取value的值需使用combobox的 HiddenName 属性,获取显示值使用name值。

(1)在extjs中combobox中的选项的数据源可以静态加载(local)也可用选择远程加载(remote)。数据源加载方式通过属性  mode 设置。

(2)属性 displayField,valueField 用于设置combobox中选项对用的 key值。设置值为string类型。这两个设置值与数据源中的key相对应。即数据源中的字段命名要和这两个属性对应好,这样才能将选项数据加载。

测试代码:

 

Ext.onReady(function(){
 //根据需要 注释相关代码 测试

/// comb1 代码添加处




/// comb2代码添加处






// 界面整体布局,comb1,comb2 为测试用combobox


var qF = new Ext.form.FormPanel({
	region : ‘center‘,
	margins : ‘3 3 3 3‘,
	height:480,
	title : ‘<span class="commoncss"><span>‘,
	collapsible : true,
	border : true,
	labelWidth : 50, // 标签宽度
	labelAlign : ‘right‘, // 标签对齐方式
	bodyStyle:‘padding:10 10 10 10‘,
	layout:‘column‘,  
    autoScroll:true,  
    items:[
			{
 
					columnWidth : .6,
					layout : ‘form‘,
					labelWidth :80, // 标签宽度
					defaultType : ‘textfield‘,
					border : false,
					items : [comb1]
			},
			{
 
					columnWidth : .6,
					layout : ‘form‘,
					labelWidth :80, // 标签宽度
					defaultType : ‘textfield‘,
					border : false,
					items : [comb2]
			}
			] 
		});	
 var viewport = new Ext.Viewport({
				layout : ‘border‘,
				items : [qF]
			});


});

  

comb1测试数据:本地静态数据源

var comb1Store =  new Ext.data.SimpleStore({ 
                                    fields : [‘SHOWNAME‘, ‘VALUE‘], 
                                    data : [[‘类型1‘, ‘0‘], [‘类型2‘, ‘1‘]] 
                                }); 
var comb1 = new Ext.form.ComboBox({
      mode : ‘local‘,//本地数据 
      store : comb1Store,
      width : 300,    
      displayField : ‘SHOWNAME‘,
      valueField : ‘VALUE‘,
      fieldLabel : ‘类型‘      
     });

 对combobox添加自动补齐功能,对comb1 添加一个属性即可:typeAhead:true 

 

comb2 远程数据加载测试:

 

var comb2store = new Ext.data.Store({
      proxy : new Ext.data.HttpProxy({
         url : WEB_CONTEXT+‘xxx.action‘ 
        }),
      reader : new Ext.data.JsonReader({}, [{
           name : ‘VALUE‘
          }, {
           name : ‘SHOWNAME‘
          }])
  });
 ds.load();
// load函数在页面加载后,数据源已经在本地了。
// 这个数据源在页面加载时已经加载到本地 

 var comb 2 =  new Ext.form.ComboBox({
      mode : ‘local‘,//本地数据
      store : comb2store,  
      width : 300,
   triggerAction: ‘all‘, displayField : ‘SHOWNAME‘,     valueField : ‘VALUE‘,   fieldLabel : ‘类型‘ });

 将上面 mode : ‘remote‘, 数据源为远程获取。

  triggerAction : ‘all’  属性添加上。不添加的话,remote下不加载数据。而且选中某个项目后 点击trigger (右边小箭头)不会显示列表了,只显示选中项目。

  triggerAction: ‘all‘,  //默认为"query",选择某值后,再次选择时只出现匹配选项,"all"表示再次选择时出现所有项

 

 

(3) 上面comb2的两种数据源的设置中,设置为remote的状态下,在用户第一次点击 trigger时,需要和后台交互。local的情况不会。

(4) 添加自动补齐的情况下,comb2,在remote的情况下每次激发自动补齐时,都需要与后台交互,而local的情况则不会。而且remote的情况下会出现自动补齐后,由于再次与后台交互导致combo的已输入内容别覆盖,显示列表中第一个选项的情况。解决方法:1.直接将combobox的mode设置为local,2.给数据源添加方法将combobox设置为local。

 combo2store.on("load",function(){
 combo2.mode=‘local‘;
});

 

以上是关于Extjs3 combobox使用的主要内容,如果未能解决你的问题,请参考以下文章

Extjs 3.4 ComboBox:首次加载组合框时如何预选一条记录?

ExtJS 3.2.1 Combobox 下拉设置值(如果存在)

extjs 3.4 ComboBox 发送错误的数据类型

在触发单击 Extjs 3.4 时重新加载 ComboBox 存储

在 ExtJs 3.3.1 中,如何在没有单击 EditorGrid 的情况下显示 ComboBox 下拉菜单?

Extjs combobox 实现搜索框的效果