EXT几个常用到的效果

自定义TREE节点图标:tree.getRootNode().getUI().getIconEl().src='图片地址'

checkgroup及radiogroup

group.items.get(1).setValue(true);


看到经常有人想实现这些效果还要重载EXT,其实完全没必要。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个EXT下拉多选搜索组件的示例代码: ```javascript Ext.define('MyApp.view.MultiSelectCombo', { extend: 'Ext.form.field.ComboBox', alias: 'widget.multiselectcombo', multiSelect: true, queryMode: 'local', triggerAction: 'all', initComponent: function() { Ext.apply(this, { tpl: '<tpl for=".">' + '<div class="x-boundlist-item">' + '<input type="checkbox" <tpl if="checked">checked="checked"</tpl>>{text}' + '</div>' + '</tpl>', displayTpl: '<tpl for=".">' + '{[values.checked ? values.text + "," : ""]}' + '</tpl>' }); this.callParent(); }, createPicker: function() { var me = this, picker = me.callParent(arguments); picker.on({ itemclick: me.onItemClick, beforeitemclick: me.onBeforeItemClick, scope: me }); return picker; }, onItemClick: function() { var me = this, picker = me.picker, valueField = picker.valueField, displayField = picker.displayField, selectedRecords = picker.getSelectionModel().getSelection(), value = [], display = []; Ext.each(selectedRecords, function(rec) { value.push(rec.get(valueField)); display.push(rec.get(displayField)); }); me.setValue(value); me.setRawValue(display.join(', ')); }, onBeforeItemClick: function(view, record, item, index, e) { var me = this, checked = !record.get('checked'); record.set('checked', checked); return false; } }); ``` 这个组件继承自Ext.form.field.ComboBox,并添加了一些自定义的配置选项,如multiSelect、tpl和displayTpl。 在initComponent方法中,我们定义了一个自定义的模板,用于渲染下拉列表项。模板中包含一个复选框和一个文本标签,文本标签显示下拉列表项的文本。如果下拉列表项被选中,则复选框被选中。 在createPicker方法中,我们添加了一个itemclick事件处理程序,用于更新组件的值和显示文本。我们还添加了一个beforeitemclick事件处理程序,用于阻止默认的选择行为,并更新下拉列表项的选中状态。 使用时,您可以将这个组件添加到您的表单中,并设置数据源和其他必要的配置选项。例如: ```javascript { xtype: 'multiselectcombo', fieldLabel: '选择项', name: 'items', store: Ext.create('Ext.data.Store', { fields: ['value', 'text'], data: [ {value: '1', text: '选项1'}, {value: '2', text: '选项2'}, {value: '3', text: '选项3'}, {value: '4', text: '选项4'}, {value: '5', text: '选项5'} ] }) } ``` 这将创建一个下拉多选搜索框,其中包含5个选项,并将选中的值存储在名为“items”的表单字段中。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值