下拉列表菜单学习

⭐️来自很多年前的笔记，只是一个归档，不做更新！⭐️

常用配置项   常用监听事件   组件渲染之后触发的事件

listeners : {'afterrender': function(){ Ext.Ajax.request({method:'post',url:'/JF/PolicyConfig_SqlInjectRule/getCurrentObject',success:function(response){var res = Ext.decode(response.responseText);//console.log(res.now_object); Ext.getCmp('databaseObject').setValue(res.now_object);}});},'change':function( combobox, newValue, oldValue){

下拉列表菜单学习 下拉列表设置默认值 使用方法，注意传的参数 的值，不是要展现的值，即可展现你的选择

Ext.getCmp('databaseObject').setValue(res.now_object);

设置默认中的第一行

获取当前下拉菜单的选择值,该组件有直接方法 ()

var currentRuleSet = Ext.getCmp('ruleSet').getValue();

怎么缩小跟下拉框之间的距离

设置:80 宽度和表签字的宽度一样，就没有了间距； 宽度越大，间距越明显。

4. 下拉框宽度如何设置?

注意 这里的是指整个下拉框组件的宽度包含你设置的宽度，因此你要的下拉那个框的宽度就是

-的宽度

{xtype:'combobox',name:'enable',id:'enable',fieldLabel: '是否启用',labelWidth:60,width: 130,store:Ext.create('Ext.data.Store', {fields: ['value', 'enable' ],data : [{"value":"2", "enable":"全部"},{"value":"1", "enable":"启用"},{"value":"0", "enable":"关闭"}]}),value:'2',queryMode: 'local',displayField: 'enable',valueField: 'value'},

自定义下拉菜单,然后可以添加一些自己的配置项，在初始化组件时进行一些处理 如这里的 : , 在配置项在中没有，是自己定义的

在配置该自定义的配置项后，label分割器加*并且布恩那个为空。

Ext.define('Kitchensink.form.JautoComboBox', {extend: 'Ext.form.field.ComboBox',alias: 'widget.JautoComboBox',editable:false,requireable: false,initComponent: function(){if(this.requireable){this.labelSeparator = '：

';this.allowBlank = false;}this.callParent();}//multiSelect: true,//支持多选});

下拉菜单需要一个 全部，初始设置，但是从服务器端ajax请求后返回内容没有 全部，选择后就再看不到 全部选项？如何解决

思路1：还是想办法 服务器端返回的内容 加上 全部选项

思路2：前端处理

下拉菜单下方添加一个永久选项，让可以选择触发一个事件，从而弹出表单窗口让新建一个xx

思路：监听前端的load事件，然后掉的add方法； add方法刚好，加到下拉列表的最后一项

//测试成功，在下拉菜单组件中，添加配置项，监听方法然后获取该组件的（），绑定的load事件方法，在load方法中使用的add方法

  listeners : {    'render':function(combo){    //store的load事件setValue第一行    combo.getStore().on("load",function(s,r,o){    console.log(r[0]);    if(typeof r[0] != 'undefined'){    combo.setValue(r[0].get('id'));    }else{    combo.setValue('该对象暂无规则，请新建');    }    s.add({id: '0',name: '--新建规则--'});    });    },'change':function( combobox, newValue, oldValue){//alert(newValue);if(newValue == 0){//触发自定义事件this.fireEvent('addRuleSet',newValue);}else{var store = Ext.ComponentQuery.query('sqlinjectrulelist')[0].getStore();var rurl = '/JF/PolicyConfig_SqlInjectRule/getList?ruleset_id='+newValue; store.proxy.url=rurl; store.type= 'ajax'; store.reload();}}}

监听下拉框选择事件如上实例，可以监听 事件

如果是我们想要的值，然后调用 触发一个自定义事件

在MVC开发模式下，在中处理这个事件，如下,在中下的如下，这里要注意

init: function(){        console.log('Initialized Users! This happens before ' +                    'the Application launch() function is called');var me = this;this.control({//注意点：view中自定义的别名   组件类型[组件中定义name] //试过直接写sqlinjectrulelist不行，要具体到extjs组件上'sqlinjectrulelist combobox[name=ruleSet]':{"addRuleSet": function(){alert('xxxxxxxxxxx');return true;}},//view中的组件如下:xtype : 'JComboBox', //自定义 继承自'Ext.form.field.ComboBox' 别名 alias: 'widget.JComboBox',fieldLabel : '规则集',name : 'ruleSet',id : 'ruleSet',editable : false,displayField : 'name',valueField : 'id',queryMode : 'remote',store : Ext.create('Ext.data.Store',{fields:['id','name'],autoLoad:true,proxy:{type:'ajax',url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',}}),

发现一个问题：我的一个下拉列表第一次点击后，从远端获取完数据后，我的下拉列表又回缩了，之后，点击就没有该问题。

原因定位分析，发现是我代码的问题，我监听了 事件，在这个组件渲染的时候绑定了的load事件，之后我第一次点击下拉菜单，触发了load事件，这个时候我让选择第一行就导致了我下拉框加载完突然回缩的问题。

listeners : {'render':function(combo){//store的load事件setValue第一行 combo.getStore().on("load",function(s,r,o){ console.log(r[0]);if(typeof r[0] != 'undefined'){//combo.setValue(r[0].get('id'));}else{ combo.setValue('该对象无规则，请新建');} s.add({id: '0',name: '--新建规则--'});});},

思路1：（推荐）

思考:发现下拉菜单会在第一次点击下拉时，会请求远端数据，但是页面在加载的时候，已经ajax请求过了，中已经有值了，如何让有值得情况下，第一次点击下拉菜单不让从服务器端ajax情况数据?

//竟然可以，你点击下拉的时候它不在会ajax请求了，只有在页面加载的那个时候才会ajax，或者你自己代码调load，解决了我的问题；

//queryMode : 'remote',queryMode : 'local',

//完整代码{xtype : 'JComboBox',fieldLabel : '规则集',name : 'ruleSet',id : 'ruleSet',editable : false,displayField : 'name',valueField : 'id',//queryMode : 'remote',queryMode : 'local',store : Ext.create('Ext.data.Store',{storeId:'ruleSetStore',fields:['id','name'],//autoLoad:false,autoLoad:true,proxy:{type:'ajax',url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',}/* listeners:{ 'load':function(){ var record = this.getAt(0).get('id'); Ext.getCmp('ruleSet').setValue(record); } } */}),

思路2（失败）：我直接在 中配置load事件处理函数，然后；结果一样，下拉列表还是会回缩。

store : Ext.create('Ext.data.Store',{fields:['id','name'],//autoLoad:false,autoLoad:false,proxy:{type:'ajax',url:'/JF/PolicyConfig_SqlInjectRule/getRuleSet',},listeners:{'load':function(){var record = this.getAt(0).get('id'); Ext.getCmp('ruleSet').setValue(record);}}}),

思路3：在组件的 事件中，；理论上是可以的，但是我这里为什么查到的结果值都是null，所以set不上- -

'afterrender':function(combo){//var fLine = Ext.ComponentQuery.query('[name=ruleSet]')[0].value;   //null//var record =   this.getStore().getAt(0).get('id');//失败原因：这里this指向的下拉菜单组件，没有getStore方法//combo.setValue(fLine);},

分析：原因处在对 方法理解不到位，查验官方api学习之：

如下例子，一个窗口+表单，我在窗口的组件中，使用this.,要理解，你这里的this指向对象，对象就没有方法。

之前在MVC开发中的 中使用this. 都是this指向当前的控制器

查询官方api 关键字“” 发现有Ext. 有Ext.app.. Ext.app..等，说明在集成自控制器的才有该方法- -

因此，改用全局Ext.，传参为值，MVC开发模式下，就时控制器配置项实例化的名。

( name ) : Ext.data.

to Ext.data.#. Gets a   by id

name :

:Ext.data.

:

for this . If , this   will be   with the Ext.data.,   it easy to   .

Note that when a   is   by a , the   will   to the name of the   if not   in the .

to: null

是一个字符串，唯一的标识一个。如果存在，这个将被注册到管理器，使其方便在其它地方复用。

注意当一个被控制器实例化时，将默认为这个的名字（在类中没有定义的情况下）

这里就是这用情况，使用全局的Ext.传进来的就是控制器实例化的。

var dialog = Ext.create('Ext.window.Window', {title: '新建规则集',maxHeight: 400,name: 'add_cmd',width: 400,modal: true,constrainHeader: true,autoShow:true,items:[{ xtype: 'rulesetform' }],buttons:[{xtype:'JButton',text:'保存',minWidth:62,handler:function() {var me = this;var win = this.up('window');var form = win.down('form').getForm();//var store = Ext.getStore('SqlInjectRules');   错误点var store = Ext.getStore('SqlInjectRules');//在store中，我是这样定义的 Ext.define('JUMP.store.SqlInjectRules', {extend: 'Ext.data.Store',model: 'JUMP.model.SqlInjectRule',/* data: [ { name: 'HaMaster', level: '2', enable: 'up',baseling_name:'激活' }, { name: 'HaMaster', level: '1', enable: 'up',baseling_name:'激活' } ] */pageSize: 15,

总结:

对下拉框组件的的理解

displayField : 'name',valueField : 'id',//queryMode : 'remote',queryMode : 'local',store : Ext.create('Ext.data.Store',{storeId:'ruleSetStore',fields:['id','name'],

问题：有时你用（key）方法赋值，但是发现，显示的是key不是key对应的值。

()的前提是中的data已经被加载，如果没有该，则直接显示key

思路1：这种情况，通常可以让下拉组件 load一下，重新从服务器端获取最新的数据，服务器端返回的数据按数据库中id降序排序，监听的的load事件，这个时候在第一行；这样的话，中就有完整的信息，就不会有问题。

Ext.(‘’).().load();

listeners : {'render':function(combo){//store的load事件setValue第一行 combo.getStore().on("load",function(s,r,o){//console.log(r[0]);if(typeof r[0] != 'undefined'){//for void list back combo.setValue(r[0].get('id'));}else{ combo.setValue('该对象无规则，请新建');} s.add({id: '0',name: '--新建规则--'});});},

下拉列表添加一条选项到第一行

如上面的例子 操作 使用 的add添加到了下拉菜单的最后一行；有上面方法可以添加到第一行呢?

总结:

所以，最佳实践就是 在不完整的情况下，你想只是展示某个内容（不根据这个选择ajax情况），可以；否则最好load一个完整的数据。