EXTjs下拉框

最新推荐文章于 2023-01-18 19:08:22 发布
最新推荐文章于 2023-01-18 19:08:22 发布
阅读量1k 收藏
点赞数
分类专栏： EXTJS 文章标签： EXTJS 下拉框 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu_xinxin/article/details/9793441
版权 
 {
					    fieldLabel: '商家类型',  
						xtype : 'combo',
				        valueField :"typeId",  
			            displayField: "typeName", 
						hiddenName : "pendingApprovalStoreInfo.storeType",
		                mode: 'local',    
		                forceSelection: true,  
			            editable: false,  
			            triggerAction: 'all',  
				        allowBlank:false,  
					    store : typeStore
					}


{xtype : 'combo',fieldLabel : "商品状态",emptyText : "请选择商品状态",allowBlank : false,width : 180,mode : 'local',editable : false,forceSelection : true,hiddenName : "goodsInfo.flag",displayField : 'name',valueField : 'value',triggerAction : 'all',forceSelection : true,store
 : new Ext.data.JsonStore({fields : ['name', 'value'],data : [{name : sysConfig.goods_flag_label_selling,value : sysConfig.goods_flag_selling}, {name : sysConfig.goods_flag_label_sold,value : sysConfig.goods_flag_sold}]})}





 


 {
					    fieldLabel: '商家类型',  
						xtype : 'combo',
				        valueField :"typeName",  
			            displayField: "typeName", 
						hiddenName : "typeId",
		                name : "pendingApprovalStoreInfo.storeType",
		                mode: 'local',    
		                forceSelection: true,  
			            editable: false,  
			            triggerAction: 'all',  
				        allowBlank:false,  
					    name: "storeCode",
					    store : typeStore
					}




 


	//取出每一个storeId值
    	var typeStore = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
    				 url : APPNAME + "/storeType_listAll.action"
    			}),
    			reader : new Ext.data.JsonReader({
    				totalProperty : 'totalCount',
					idProperty : 'typeId',
					remoteSort : true,
					root : "types",
					fields : ["typeId", "typeName", "remarks"]
    			}),
    			autoLoad : false
    		});
    	typeStore.load();




 




数据库中查询值，根据不同的值，显示不同的描述（针对form表单）：


 {
					    fieldLabel: '商家类型',  
						xtype : 'combo',
				        valueField :"typeId",  
			            displayField: "typeName", 
						hiddenName : "pendingApprovalStoreInfo.storeType",
		                mode: 'local',    
		                forceSelection: true,  
			            editable: false,  
			            triggerAction: 'all',  
				        allowBlank:false,  
					    store : typeStore
					}






 


	//取出每一个storeId值
    	var typeStore = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
    				 url : APPNAME + "/storeType_listAll.action"
    			}),
    			reader : new Ext.data.JsonReader({
    				totalProperty : 'totalCount',
					idProperty : 'typeId',
					remoteSort : true,
					root : "types",
					fields : ["typeId", "typeName", "remarks"]
    			}),
    			autoLoad : false
    		});
    	typeStore.load();




 




 



                

        

        

    




    

      

        

            

              
                
                  hu_xinxin
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Extjs6 下拉列表

				
			

			

				

					03-31
				

			

		

		

			
				
Extjs 下拉列表

			
		

	



                

              
                



	

		

			

				
					
extjs多选下拉框

				
			

			

				

					02-23
				

			

		

		

			
				
extjs多选下拉框，支持单选，多选，全选和全不选，ext3.*适用，文章的例子下载。

			
		

	



                


  
              

                


	

		

			

				
					
EXTJS-->下拉框

				
			

			

				

					希瓦咸鱼
				

				

					01-26
					
					342
					
				

			

		

		

			
				
var suppStore = new Ext.data.Store({
            
//autoLoad: true,
            
proxy : new Ext.data.HttpProxy({
            
url : rootPath+"basedata/supplierInfo!getSuppliers.action",
      

			
		

	





	

		

			

				
					
Extjs6中Combobox实现下拉多选

				
			

			

				

					07-29
				

			

		

		

			
				
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

			
		

	



		

			
		



	

		

			

				
					
extjs中的xtype的所有类型介绍

				
			

			

				

					01-28
				

			

		

		

			
				
extjs中的xtype的所有类型介绍

			
		

	





	

		

			

				
					
extJs 下拉框联动实现代码

				
			

			

				

					10-29
				

			

		

		

			
				
ExtJs 下拉框联动实现代码详解  ExtJs 是一个功能强大且灵活的 JavaScript 框架，广泛应用于 Web 应用程序开发。今天，我们将介绍如何使用 ExtJs 实现下拉框联动的功能。   ExtJs 中的下拉框控件是 Combo，它提供了...

			
		

	





	

		

			

				
					
解决Extjs下拉框不显示的问题

				
			

			

				

					10-19
				

			

		

		

			
				
解决ExtJS中ComboBox下拉框不显示的问题，通常需要从组件渲染、Z-Index管理、父容器影响以及事件处理等多个角度进行排查。通过监听组件事件并动态调整样式，可以有效地避免因层叠顺序问题导致的显示异常。同时，良好...

			
		

	





	

		

			

				
					
EXTJS 选下拉框，并取得下拉框的值

				
			

			

				

					08-02
				

			

		

		

			
				
首先，创建一个基本的EXTJS下拉框需要定义`Ext.form.field.ComboBox`对象。以下是一个简单的示例：  ```javascript Ext.application({  name: 'MyApp',  launch: function () {  Ext.create('Ext.container.Viewport...

			
		

	





	

		

			

				
					
ExtJs4 combox下拉列表

				
			

			

				

					だ冷悦清风だ的专栏
				

				

					08-14
					
					1423
					
				

			

		

		

			
				
xtype:'combo',
                    fieldLabel: '发件人',
                    afterLabelTextTpl: required,
                    allowBlank: false,
                    name:'sendBoxForm.fromUserName',
     

			
		

	





	

		

			

				
					
Extjs中的combox每个属性的意思

				
			

			

				

					lv_shijun的专栏
				

				

					05-18
					
					957
					
				

			

		

		

			
				
Extjs中的combox每个属性的意思

			
		

	





	

		

			

				
					
ExtJs控件属性配置详细

				
			

			

				

					weixin_34233618的博客
				

				

					08-27
					
					432
					
				

			

		

		

			
				
序言：
   1.本文摘自网络，看控件命名像是4.0以前的版本，但控件属性配置仍然可以借鉴（不足之处，以后项目用到时再续完善）。
Ext.form.TimeField:
  配置项：            maxValue：列表中允许的最大时间            maxText：当时间大于最大值时的错误提示信息            minValue：列表中允许的最小时间        ...

			
		

	





	

		

			

				
					
Extjs中的xtype一览表

				
			

			

				

					biubiubiubibibi的博客
				

				

					01-18
					
					606
					
				

			

		

		

			
				
Extjs中的xtype一览表

			
		

	





	

		

			

				
					
ExtJS ComboBox 下拉列表详细用法

					
热门推荐

				
			

			

				

					luckypeng的专栏
				

				

					06-14
					
					3万+
					
				

			

		

		

			
				
原文转自起飞网：http://www.qeefee.com/article/000171




ComboBox 是ExtJS中经常用到的控件，今天我们来讲一下它的一些用法。

使用本地Store

ComboBox需要结合Store一起使用，下面是一个最简单的例子，结合本地的Store的用法：
var genderStore = Ext.create("Ext.data.S

			
		

	





	

		

			

				
					
Extjs6 经典版 combo下拉框数据的使用及动态传参

				
			

			

				

					weixin_30855099的博客
				

				

					06-18
					
					431
					
				

			

		

		

			
				
Extjs的下拉框，在点击的时候会请求一次数据，我们可不可以在点击前就请求好数据，让用户体验更好呢？答案当然是肯定的。如果是公用的下拉框还可以传入不同参数请求不同数据。


第一步：
　　进入页面前首先加载store数据，可以根据不同参数请求不同数据，当然这个请求是跟后台交互的。
　　Ext.getStore('startteamstore').load({params:{id:par...

			
		

	





	

		

			

				
					
ExtJs6 form回显combo下拉框的值方法

				
			

			

				

					eumenides_的博客
				

				

					06-02
					
					4521
					
				

			

		

		

			
				
一般grid加载出来值之后我们对某一行编辑时，打开form会出现远程查询下拉框值不会回显，也就是没有值的情况，我们可以按照以下方法让值回显。 
比如说后端返回实体类中有cityId和cityName两个字段。 
大体思路就是，弹出form时手动加载下拉框store同时监听load事件将id和name插到store里。combo下拉框组件部分：
Ext.define('App.textfield.Ci

			
		

	





	

		

			

				
					
Extjs4.0 Combobox的使用

				
			

			

				

					一切皆有联系
				

				

					07-03
					
					2万+
					
				

			

		

		

			
				
创建Combobox
combobox可以自己输入值，也可以从下拉框中直接选择。输入的值可以不是下拉框的值。
如果下拉框的值是本地数据，最好设定queryMode为local，这样可以提高用户的响应速度。当typeAhead设定为true时，会自动选择下拉框中第一匹配的字段
            Ext.tip.QuickTipManager.init();

            //

			
		

	





	

		

			

				
					
Extjs下拉框多选 回显

					
最新发布

				
			

			

				

					05-20
				

			

		

		

			
				
在 Extjs 中，可以通过设置 `multiSelect` 属性为 `true` 来实现下拉框多选。回显则需要先获取到下拉框组件的值，然后将其赋值给需要回显的表单元素。

例如，在以下代码中，我们创建了一个下拉框组件，设置了 `multiSelect` 为 `true`，并将其添加到了表单中。当用户选择完选项后，点击保存按钮时，我们可以获取到下拉框的值，然后将其赋值给一个隐藏的表单元素，以便在下一次打开表单时进行回显。

```javascript
Ext.create('Ext.form.Panel', {
    title: 'My Form',
    items: [{
        xtype: 'combo',
        fieldLabel: 'Choose Options',
        multiSelect: true,
        store: ['Option 1', 'Option 2', 'Option 3'],
        displayField: 'name',
        valueField: 'value'
    }, {
        xtype: 'hidden',
        name: 'selectedOptions' // 隐藏表单元素，用于回显
    }],
    buttons: [{
        text: 'Save',
        handler: function() {
            var form = this.up('form').getForm();
            var selectedOptions = form.findField('selectedOptions');
            var combo = form.findField('combo');
            var value = combo.getValue();
            selectedOptions.setValue(value); // 将下拉框的值赋值给隐藏表单元素
            form.submit({
                success: function() {
                    Ext.Msg.alert('Success', 'Form submitted successfully.');
                },
                failure: function() {
                    Ext.Msg.alert('Error', 'Form submission failed.');
                }
            });
        }
    }]
});
```

在打开表单时，我们需要先获取到隐藏元素的值，然后将其赋值给下拉框组件。代码如下：

```javascript
var form = Ext.create('Ext.form.Panel', {
    title: 'My Form',
    items: [{
        xtype: 'combo',
        fieldLabel: 'Choose Options',
        multiSelect: true,
        store: ['Option 1', 'Option 2', 'Option 3'],
        displayField: 'name',
        valueField: 'value'
    }, {
        xtype: 'hidden',
        name: 'selectedOptions',
        value: ['Option 1', 'Option 2'] // 设置隐藏表单元素的初始值，用于回显
    }]
});

var selectedOptions = form.getForm().findField('selectedOptions').getValue();
var combo = form.getForm().findField('combo');
combo.setValue(selectedOptions); // 将隐藏表单元素的值赋值给下拉框组件
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值