日期:2014-05-16  浏览次数:20360 次

Extjs下拉树组件

转: http://www.2cto.com/kf/201206/135007.html

?

/**
?*下拉树类(Jelly)
?*/?
Ext.define('Redm.commons.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) {?
??????? 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;?
??????? 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,?
??????????? store = picker.store,?
??????????? value = me.value;?
??????? if(value) {?
??????????? var node = store.getNodeById(value);?
??????????? if(node)?
??????????????? picker.selectPath(node.ge