扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示
本示例通过配置tpl参数，增加ext4.1的Ext.ux.form.ItemSelector要显示的内容。默认Ext.ux.form.ItemSelector只能显示一个配置的值，通过对Ext.ux.form.ItemSelector和Ext.ux.form.MultiSelect的修改，传递tpl参数实现自定义显示。效果如下，增加了value的显示。
扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示步骤如下
１）在ext的examples\ux\form中找到MultiSelect.js，在顶部定义一个新组件Ext.view.MultiSelectDisplayValue
Ext.define('Ext.view.MultiSelectDisplayValue', {
extend: 'Ext.view.BoundList',
// alias : 'widget.multiselectdisplayvalue',
// alternateClassName : 'Ext.MultiSelectDisplayValue',
initComponent: function () {
var me = this;
if (!me.tpl) {
me.tpl = new Ext.XTemplate(
'<ul><tpl for=".">',
'<li role="option" class="' + me.itemCls + '">'
+ me.getInnerTpl(me.displayField)
+ '(' + me.getInnerTpl(me.valueField) + ')'
+ '</li>',
'</tpl></ul>');
} else if (Ext.isString(me.tpl)) {//注意这里为什么要替换模板中的内容，具体看第四步的说明
me.tpl = Ext.create('Ext.XTemplate', me.tpl.replace(/<class>/gi,me.itemCls));
}
me.callParent();
}
});
/**
* A control that allows selection of multiple items in a list
*/
Ext.define('Ext.ux.form.MultiSelect', {
extend: 'Ext.form.FieldContainer',
mixins: {
bindable: 'Ext.util.Bindable',
field: 'Ext.form.field.Field'
},
alternateClassName: 'Ext.ux.Multiselect',
alias: ['widget.multiselectfield', 'widget.multiselect'],
requires: ['Ext.panel.Panel', 'Ext.view.BoundList', 'Ext.layout.container.Fit', 'Ext.view.MultiSelectDisplayValue'],//注意这里增加新组件的引用
uses: ['Ext.view.DragZone', 'Ext.view.DropZone'],
layout: 'fit',
/*....原来的其他代码*/);
２）修改MultiSelect.js同文件中Ext.ux.form.MultiSelect对象的setupItems方法，创建对象为新定义的Ext.view.MultiSelectDisplayValue
setupItems: function() {
var me = this;
/*
me.boundList = Ext.create('Ext.view.BoundList', Ext.apply({
deferInitialRefresh: false,
border: false,
multiSelect: true,
store: me.store,
displayField: me.displayField,
disabled: me.disabled
}, me.listConfig));*/
//原来的代码使用Ext.view.BoundList显示，改为新定义的对象
me.boundList = Ext.create('Ext.view.MultiSelectDisplayValue',{
deferInitialRefresh: false,
multiSelect: true,
store: me.store,
displayField: me.displayField,
valueField: me.valueField,
tpl:me.tpl,//注意传递tpl
border: false,
disabled: me.disabled
});
me.boundList.getSelectionModel().on('selectionchange', me.onSelectChange, me);
return {
border: true,
layout: 'fit',
title: me.title,
tbar: me.tbar,
items: me.boundList
};
}
３）修改Ext.ux.form.ItemSelector，传递tpl参数给Ext.view.MultiSelectDisplayValue
createList: function(title){
var me = this;
return Ext.create('Ext.ux.form.MultiSelect', {
submitValue: false,
flex: 1,
dragGroup: me.ddGroup,
dropGroup: me.ddGroup,
title: title,
store: {
model: me.store.model,
data: []
},
displayField: me.displayField,
tpl:me.tpl,/////////
disabled: me.disabled,
listeners: {
boundList: {
scope: me,
itemdblclick: me.onItemDblClick,
drop: me.syncValue
}
}
});
}
４）下面的使用方法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cell Editing Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<link rel="stylesheet" type="text/css" href="../ux/css/ItemSelector.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script>
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require(['Ext.selection.CellModel', 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*', 'Ext.form.*', 'Ext.ux.form.ItemSelector']);
Ext.onReady(function () {
itemselector = Ext.create("Ext.ux.form.ItemSelector", {
id: "test",
height: 300,
width: 400,
displayField: 'name',
valueField: 'id',
//特别说明：在传递tpl的时候，直接调用this，this其实为window，并不是实例对象本身，所以获取对象默认的样式比较麻烦，除非知道默认的ext样式，就可以直接tpl: Ext.create("Ext.XTemplate", "模板内容包含样式的")
//所以传递字符的模板，样式用特殊内容代替，在创建的时候动态替换掉样式的特殊内容为ext默认的样式
tpl: '<ul><tpl for="."><li role="option" class="<class>">{name}[{id}]</li></tpl></ul>',
renderTo: document.body,
store: Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [{ id: "showbo", name: "web开发网" }, { id: "1", name: "name1" }, { id: "2", name: "name2"}]
})
});
});
</script>
</head>
<body>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：扩展ext4.1 Ext.ux.form.ItemSelector增加自定义显示