Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance. Project price only 1 $
You can buy this project and download/modify it how often you want.
/**
* 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));
}
}
});
