Ext:Ext.menu.Menu动态加载菜单

var createMenu = new Ext.menu.Menu({
    id : 'mainMenu',
    items : [],
    listeners : {
     click : function(menu, item, e) {
      var record = groupLevelStore.getAt(item.getId());
      addGroup(record);
     }
    }
   })
 // 字段
 var groupLevelFields = ["id", "levelName", "capacity"];
 // 记录
 var groupLevelRecord = new Ext.data.Record.create([{
    name : "id"
   }, {
    name : "levelName"
   }, {
    name : "capacity"
   }]);
 // 数据
 groupLevelStore = new Ext.data.Store({
  // 代理
  proxy : new Ext.data.HttpProxy({
     url : Action.corp.GroupLevelMngAction.GET_USERDEFAULTGROUPLEVEL,
     method : "POST"
    }),
  // 解析器
  reader : new Ext.data.JsonReader({
     fields : groupLevelFields,
     root : "data",
     id : "id",
     totalProperty : "totalCount"
    }, groupLevelRecord)
 });
 groupLevelStore.load({
    callback : function(records, options, success) {
     
     if (records.length == 0) {
      Ext.getCmp('createGroup').setDisabled(true);
     }else{
      for (var i = 0; i < records.length; i++) {
       var item = new Ext.menu.Item({
          text : "创建" + records[i].data.levelName,
          id : i + ''
         });
       createMenu.addItem(item);
      }
     }
    },
    scope : groupLevelStore
   })
 // 工具栏
 var toolBar = new Ext.Toolbar(["", "-", "", {
    text : "创建群",
    id:"createGroup",
    iconCls : "addicon",
    menu : createMenu
   }, 
   }]);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS的combobox组件本身并不支持多选和搜索功能,但是可以通过扩展来实现这些功能。以下是一个基于ExtJS 6.5版本的下拉多选框带搜索功能的示例代码: ```javascript Ext.define('MyApp.view.MultiSelectComboBox', { extend: 'Ext.form.field.ComboBox', xtype: 'multiselectcombo', multiSelect: true, delimiter: ',', triggerAction: 'all', queryMode: 'remote', queryParam: 'search', minChars: 1, createPicker: function() { var me = this, picker, menuCls = Ext.baseCSSPrefix + 'menu', opts = Ext.apply({ pickerField: me, selModel: { mode: 'SIMPLE' }, floating: true, hidden: true, ownerCt: me.ownerCt, cls: me.el.up('.' + menuCls) ? menuCls : '', store: me.store, displayField: me.displayField, focusOnToFront: false, pageSize: me.pageSize }, me.listConfig, me.defaultListConfig); picker = me.picker = Ext.create('Ext.view.BoundList', opts); me.mon(picker.getSelectionModel(), { 'beforeselect': me.onBeforeSelect, 'beforedeselect': me.onBeforeDeselect, scope: me }); me.mon(picker, { itemclick: me.onItemClick, refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me); return picker; }, initComponent: function() { var me = this; me.callParent(arguments); me.on('change', me.onChange, me); }, onChange: function(combo, newValue, oldValue) { var me = this, delimiter = me.delimiter, values = newValue.split(delimiter), store = me.getStore(), valueField = me.valueField, displayField = me.displayField, rec, i, len, value; store.clearFilter(); store.filter(function(record) { return Ext.Array.contains(values, record.get(displayField)); }); me.setValue(values.join(delimiter)); }, onBeforeDeselect: function(list, record) { return !this.readOnly; }, onBeforeSelect: function(list, record) { return !this.readOnly; }, onItemClick: function(view, record, item, index, e) { var me = this, delimiter = me.delimiter, displayField = me.displayField, valueField = me.valueField, value = record.get(displayField), oldValue = me.getValue(), values, index; if (!Ext.isDefined(oldValue)) { oldValue = ''; } values = oldValue.split(delimiter); index = Ext.Array.indexOf(values, value); if (index > -1) { values.splice(index, 1); } else { values.push(value); } me.setValue(values.join(delimiter)); me.fireEvent('select', me, [record]); } }); ``` 这个组件继承自Ext.form.field.ComboBox,并添加了以下属性和方法: - multiSelect:是否启用多选功能,缺省为false。 - delimiter:多选时使用的分隔符,缺省为逗号。 - createPicker:重写父类的createPicker方法,用于创建下拉框的选择器。这里使用了Ext.view.BoundList组件来实现多选和搜索功能。 - onChange:重写父类的onChange方法,在值改变时更新选择器中选中的项。 - onItemClick:处理选择器中的选项点击事件,实现多选功能。 使用这个组件时,只需将xtype设置为'multiselectcombo'即可,例如: ```javascript Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), width: 400, items: [{ xtype: 'multiselectcombo', fieldLabel: 'Select', name: 'select', store: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'] }] }); ``` 这个示例中,使用了一个简单的字符串数组作为数据源。实际应用中,可以使用Ext.data.Store来加载数据,并设置queryMode为'remote',通过AJAX请求服务器端进行搜索。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值