Base on 'Ext.form.field.Picker'
Testing: ExtJS 4.1.0-rc3
Thanks!
ps: i can't english very well. Please understand that, even if the comment is invalid.
PHP Code:
/**
* Combobox inside TreePanel
*
* @author jhkang
* @since 2012-03-27
*/
Ext.define('Ext.ux.form.field.TreePicker', {
extend: 'Ext.form.field.Picker',
alias: 'widget.uxTreepicker',
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} valueField
* The field inside the model that will be used as the node's id.
* Defaults to the default value of {@link Ext.tree.Panel}'s `valueField` configuration.
*/
valueField: 'id',
/**
* @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: 'text',
/**
* @cfg {Array} columns
* An optional array of columns for multi-column trees
*/
columns: null
},
/**
* @cfg {String} emptyText
* The default text to place into an empty field.
*/
emptyText: 'Choose one...',
/**
* @cfg {Boolean} matchFieldWidth
* Whether the picker dropdown's width should be explicitly set to match the width of the field. Defaults to false.
*/
matchFieldWidth: false,
/**
* @cfg {Boolean} selectOnlyLeafNode
*/
selectOnlyLeafNode: false,
initComponent: function() {
this.callParent(arguments);
this.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'
);
},
/**
* Creates and returns the tree panel to be used as this field's picker.
* @private
*/
createPicker: function() {
var treePicker = Ext.create('Ext.tree.Panel', {
hidden: true,
floating: true,
resizable: true,
resizeHandles: 's e se',
autoScroll: true,
width: 500,
minWidth: this.bodyEl.getWidth(),
height: 200,
maxHeight: 300,
shadow: false,
columns: this.columns,
rootVisible: this.rootVisible,
store: this.store,
listeners: {
scope: this,
focus: Ext.bind(this.onFocus, this),
itemclick: Ext.bind(this.onItemClick, this)
}
});
return treePicker;
},
/**
* @private
*/
onFocus: function() {
this.expand();
},
/**
* 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, item, index, e, eOpts) {
if (!this.selectOnlyLeafNode) {
if (record.isLeaf()) {
this.selectNode(record);
}
} else {
this.selectNode(record);
}
},
/**
* Changes the selection to a given record and closes the picker
* @private
* @param {Ext.data.Model} record
*/
selectNode: function(record) {
this.setFieldValue(record.raw[this.valueField], record.raw[this.displayField]);
this.fireEvent('select', this, record.get(this.valueField));
this.collapse();
},
/**
* @private
* @param {String} id
* @param {String} text
*/
setFieldValue: function(id, text) {
this.setValue(id);
this.setRawValue(text);
},
/**
* Sets the specified value into the field
* @param {Mixed} value
*/
setValue: function(value) {
var me = this,
inputEl = me.inputEl;
if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
inputEl.removeCls(me.emptyCls);
}
me.value = value;
me.applyEmptyText();
},
setRawValue: function(value) {
this.inputEl.dom.value = value == null ? '' : value;
},
/**
* Returns the current data value of the field (the idProperty of the record)
* @return {Mixed} value
*/
getValue: function() {
return this.value;
}
});
How to use
PHP Code:
Ext.define('App.example.TreeCombo', {
extend: 'Ext.panel.Panel',
alias: 'widget.treecombo',
initComponent: function() {
var me = this;
Ext.apply(me, {
itemId: me.itemId,
title: 'Tree Combobox',
region: 'center',
bodyPadding: 5,
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
itemId: 'treecombo',
xtype: 'uxTreepicker',
displayField: 'text',
valueField: 'module',
rootVisible: false,
padding: '0 5 0 0',
store: Ext.data.StoreManager.lookup('exampleStore')
},{
xtype: 'button',
text: 'Test',
handler: function() {
console.log(me.down('#treecombo').getValue());
}
}]
}]
});
me.callParent(arguments);
}
});
Store
PHP Code:
var exampleStore = Ext.create('Ext.data.TreeStore', {
storeId: 'exampleStore',
root: {
expanded: true,
children: [{
text: 'Editor',
expanded: true,
children: [{
itemId: 'tinymceeditor',
text: 'TinyMCE Editor',
module: 'widget.tinymceeditor',
leaf: true
}]
}]
}
});
Resizable TreePicker
Originally Posted by mitchellsimoens
Reply With Quote
