/**
|
* A Picker field that contains a tree panel on its popup, enabling selection of tree nodes.
|
*/
|
Ext.define('Ext.ux.TreePicker', {
|
extend: 'Ext.form.field.Picker',
|
xtype: 'treepicker',
|
|
uses: [
|
'Ext.tree.Panel'
|
],
|
|
triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
|
|
config: {
|
/**
|
* @cfg {Ext.data.TreeStore} store
|
* A tree store that the tree picker will be bound to
|
*/
|
store: null,
|
|
/**
|
* @cfg {String} displayField
|
* The field inside the model that will be used as the node's text.
|
* Defaults to the default value of {@link Ext.tree.Panel}'s `displayField` configuration.
|
*/
|
displayField: null,
|
|
/**
|
* @cfg {Array} columns
|
* An optional array of columns for multi-column trees
|
*/
|
columns: null,
|
|
/**
|
* @cfg {Boolean} selectOnTab
|
* Whether the Tab key should select the currently highlighted item. Defaults to `true`.
|
*/
|
selectOnTab: true,
|
|
/**
|
* @cfg {Number} maxPickerHeight
|
* The maximum height of the tree dropdown. Defaults to 300.
|
*/
|
maxPickerHeight: 300,
|
|
/**
|
* @cfg {Number} minPickerHeight
|
* The minimum height of the tree dropdown. Defaults to 100.
|
*/
|
minPickerHeight: 100
|
},
|
|
editable: false,
|
|
initComponent: function() {
|
var me = this;
|
me.callParent(arguments);
|
|
me.addEvents(
|
/**
|
* @event select
|
* Fires when a tree node is selected
|
* @param {Ext.ux.TreePicker} picker This tree picker
|
* @param {Ext.data.Model} record The selected record
|
*/
|
'select'
|
);
|
|
me.mon(me.store, {
|
scope: me,
|
load: me.onLoad,
|
update: me.onUpdate
|
});
|
},
|
|
/**
|
* Creates and returns the tree panel to be used as this field's picker.
|
*/
|
createPicker: function() {
|
var me = this,
|
picker = new Ext.tree.Panel({
|
shrinkWrapDock: 2,
|
store: me.store,
|
floating: true,
|
displayField: me.displayField,
|
columns: me.columns,
|
minHeight: me.minPickerHeight,
|
maxHeight: me.maxPickerHeight,
|
manageHeight: false,
|
shadow: false,
|
listeners: {
|
scope: me,
|
itemclick: me.onItemClick
|
},
|
viewConfig: {
|
listeners: {
|
scope: me,
|
render: me.onViewRender
|
}
|
}
|
}),
|
view = picker.getView();
|
|
if (Ext.isIE9 && Ext.isStrict) {
|
// In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
|
// Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
|
view.on({
|
scope: me,
|
highlightitem: me.repaintPickerView,
|
unhighlightitem: me.repaintPickerView,
|
afteritemexpand: me.repaintPickerView,
|
afteritemcollapse: me.repaintPickerView
|
});
|
}
|
return picker;
|
},
|
|
onViewRender: function(view){
|
view.getEl().on('keypress', this.onPickerKeypress, this);
|
},
|
|
/**
|
* repaints the tree view
|
*/
|
repaintPickerView: function() {
|
var style = this.picker.getView().getEl().dom.style;
|
|
// can't use Element.repaint because it contains a setTimeout, which results in a flicker effect
|
style.display = style.display;
|
},
|
|
/**
|
* Aligns the picker to the input element
|
*/
|
alignPicker: function() {
|
var me = this,
|
picker;
|
|
if (me.isExpanded) {
|
picker = me.getPicker();
|
if (me.matchFieldWidth) {
|
// Auto the height (it will be constrained by max height)
|
picker.setWidth(me.bodyEl.getWidth());
|
}
|
if (picker.isFloating()) {
|
me.doAlign();
|
}
|
}
|
},
|
|
/**
|
* Handles a click even on a tree node
|
* @private
|
* @param {Ext.tree.View} view
|
* @param {Ext.data.Model} record
|
* @param {HTMLElement} node
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
onItemClick: function(view, record, node, rowIndex, e) {
|
this.selectItem(record);
|
},
|
|
/**
|
* Handles a keypress event on the picker element
|
* @private
|
* @param {Ext.EventObject} e
|
* @param {HTMLElement} el
|
*/
|
onPickerKeypress: function(e, el) {
|
var key = e.getKey();
|
|
if(key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
|
this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
|
}
|
},
|
|
/**
|
* Changes the selection to a given record and closes the picker
|
* @private
|
* @param {Ext.data.Model} record
|
*/
|
selectItem: function(record) {
|
var me = this;
|
me.setValue(record.getId());
|
me.picker.hide();
|
me.inputEl.focus();
|
me.fireEvent('select', me, record)
|
|
},
|
|
/**
|
* Runs when the picker is expanded. Selects the appropriate tree node based on the value of the input element,
|
* and focuses the picker so that keyboard navigation will work.
|
* @private
|
*/
|
onExpand: function() {
|
var me = this,
|
picker = me.picker,
|
store = picker.store,
|
value = me.value,
|
node;
|
|
|
if (value) {
|
node = store.getNodeById(value);
|
}
|
|
if (!node) {
|
node = store.getRootNode();
|
}
|
|
picker.selectPath(node.getPath());
|
|
Ext.defer(function() {
|
picker.getView().focus();
|
}, 1);
|
},
|
|
/**
|
* Sets the specified value into the field
|
* @param {Mixed} value
|
* @return {Ext.ux.TreePicker} this
|
*/
|
setValue: function(value) {
|
var me = this,
|
record;
|
|
me.value = value;
|
|
if (me.store.loading) {
|
// Called while the Store is loading. Ensure it is processed by the onLoad method.
|
return me;
|
}
|
|
// try to find a record in the store that matches the value
|
record = value ? me.store.getNodeById(value) : me.store.getRootNode();
|
if (value === undefined) {
|
record = me.store.getRootNode();
|
me.value = record.getId();
|
} else {
|
record = me.store.getNodeById(value);
|
}
|
|
// set the raw value to the record's display field if a record was found
|
me.setRawValue(record ? record.get(me.displayField) : '');
|
|
return me;
|
},
|
|
getSubmitValue: function(){
|
return this.value;
|
},
|
|
/**
|
* Returns the current data value of the field (the idProperty of the record)
|
* @return {Number}
|
*/
|
getValue: function() {
|
return this.value;
|
},
|
|
/**
|
* Handles the store's load event.
|
* @private
|
*/
|
onLoad: function() {
|
var value = this.value;
|
|
if (value) {
|
this.setValue(value);
|
}
|
},
|
|
onUpdate: function(store, rec, type, modifiedFieldNames){
|
var display = this.displayField;
|
|
if (type === 'edit' && modifiedFieldNames && Ext.Array.contains(modifiedFieldNames, display) && this.value === rec.getId()) {
|
this.setRawValue(rec.get(display));
|
}
|
}
|
|
});
|