Extjs3 combobox使用

Posted 2020-07-12 googlg

　　　　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‘;
});