本组件是由单选下拉数改的,单选下拉树博客地址:http://blog.csdn.net/hao_ds/article/details/50522058
/**
*下拉树类(Jelly)
*/
Ext.define('Ext.ux.TreeCombox', {
extend: 'Ext.form.field.Picker',
xtype: 'treecombox',
triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
config: {
displayField: null,
columns: null,
rootVisible: true,
selectOnTab: true,
firstSelected: false,
maxPickerWidth: 300,
maxPickerHeight: 360,
minPickerHeight: 100
},
editable: false,
initComponent: function () {
var me = this;
me.callParent(arguments);
this.addEvents('select');
me.store.on('load', me.onLoad, me);
},
createPicker: function () {
var me = this,
picker = Ext.create('Ext.tree.Panel', {
store: me.store,
floating: true,
hidden: true,
width: me.maxPickerWidth,
displayField: me.displayField,
columns: me.columns,
maxHeight: me.maxTreeHeight,
shadow: false,
rootVisible: me.rootVisible,
manageHeight: false,
listeners: {
itemclick: Ext.bind(me.onItemClick, me)
},
viewConfig: {
listeners: {
render: function (view) {
view.getEl().on('keypress', me.onPickerKeypress, me);
}
}
}
}),
view = picker.getView();
view.on('render', me.setPickerViewStyles, me);
if (Ext.isIE9 && Ext.isStrict) {
view.on('highlightitem', me.repaintPickerView, me);
view.on('unhighlightitem', me.repaintPickerView, me);
view.on('afteritemexpand', me.repaintPickerView, me);
view.on('afteritemcollapse', me.repaintPickerView, me);
}
return picker;
},
setPickerViewStyles: function (view) {
view.getEl().setStyle({
'min-height': this.minPickerHeight + 'px',
'max-height': this.maxPickerHeight + 'px'
});
},
repaintPickerView: function () {
var style = this.picker.getView().getEl().dom.style;
style.display = style.display;
},
alignPicker: function () {
var me = this,
picker;
if (me.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
picker.setWidth(this.picker.getWidth());
}
if (picker.isFloating()) {
me.doAlign();
}
}
},
onItemClick: function (view, record, node, rowIndex, e) {
if (record.isLeaf()) {
var checked = !record.data.checked;
record.set('checked', checked);
//this.onCheckChange(record, checked);
this.selectItem(record);
}
},
onPickerKeypress: function (e, el) {
var key = e.getKey();
if (key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
}
},
selectItem: function (record) {
var me = this;
var records = me.picker.getView().getChecked(); //当前所有选中节点
values = [];
Ext.Array.each(records,
function (rec) {
//names.push(rec.get('text'));
values.push(rec.get('id'));
});
me.setValue(values.join(','));
//me.setValue(record.get(this.valueField || 'id'));
me.picker.hide();
me.inputEl.focus();
me.fireEvent('select', me, record)
},
onExpand: function () {
var me = this,
picker = me.picker,
view = picker.getView(),
store = picker.store,
value = me.value,
node;
var records = me.picker.getView().getChecked(); //当前所有选中节点
//取消选择当前已选择节点
Ext.Array.each(records,
function (rec) {
rec.set('checked', false);
});
var valueList = value.split(',');
if (valueList.length > 0) {
for (var i = 0; i < valueList.length; i++) {
node = store.getNodeById(valueList[i]);
node.set('checked', true);
var nodePath = node.getPath('id');
picker.getComponentLayout().owner.expandPath(nodePath, 'id');
}
}
Ext.defer(function () {
view.focus();
}, 1);
},
//onExpand: function () {
// var me = this,
// picker = me.picker,
// store = picker.store,
// value = me.value;
// if (value) {
// var node = store.getNodeById(value);
// if (node)
// picker.selectPath(node.getPath());
// } else {
// var hasOwnProp = me.store.hasOwnProperty('getRootNode');
// if (hasOwnProp)
// picker.getSelectionModel().select(store.getRootNode());
// }
// Ext.defer(function () {
// picker.getView().focus();
// }, 1);
//},
setValue: function (value) {
var me = this, record;
me.value = value;
if (me.store.loading) {
return me;
}
try {
var rawValueList = new Array();
if (value) {
var valueList = value.split(',');
for (var i = 0; i < valueList.length; i++) {
var rec = me.store.getNodeById(valueList[i]);
if (rec)
rawValueList[i] = rec.get(me.displayField)
}
me.setRawValue(rawValueList.join());
//var hasOwnProp = me.store.hasOwnProperty('getRootNode');
//record = value ? me.store.getNodeById(value) : (hasOwnProp ? me.store.getRootNode() : null);
//me.setRawValue(record ? record.get(this.displayField) : '');
} else {
me.setRawValue('');
}
} catch (e) {
me.setRawValue('');
}
return me;
},
getValue: function () {
return this.value;
},
onLoad: function (store, node, records) {
var value = this.value;
if (value) {
this.setValue(value);
} else {
if (this.firstSelected) {
if (records && records.length > 0) {
var record = records[0];
this.setValue(record.get(this.valueField));
}
}
}
},
getSubmitData: function () {
var me = this,
data = null;
if (!me.disabled && me.submitValue) {
data = {};
data[me.getName()] = '' + me.getValue();
}
return data;
},
onTriggerClick: function () {
var me = this;
//me.store.load();
if (!me.readOnly && !me.disabled) {
if (me.isExpanded) {
me.collapse();
} else {
me.expand();
}
me.inputEl.focus();
}
}
});