ext4.x 下拉树(commbox tree)实现。

来源:互联网 发布:龙腾软件上传宝贝淘宝 编辑:程序博客网 时间:2024/05/20 20:57
{    name: 'city',     fieldLabel: '城市',     xtype: 'treecombox',     valueField: 'id',     displayField: 'name',     store: Ext.create('Ext.data.TreeStore', {      nodeParam:'id',        fields: ['name','id'],         root: {         name:'所有',            id: 'root',             expanded: true         },         proxy: {              type: 'ajax',              url: '../../api/usertag/tree.json'         }     }) },


Ext.define('Sharera.system.view.user.User.CommTree', {     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: 150,         minPickerHeight: 80     },     autoScroll:true,    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.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 hasOwnProp = me.store.hasOwnProperty('getRootNode');             record = value ? me.store.getNodeById(value) : (hasOwnProp ? me.store.getRootNode() : null);             me.setRawValue(record ? record.get(this.displayField) : '');         }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();         }     } }); 
Ext.define('Sharera.system.controller.user.User', {    extend: 'Ext.app.Controller',models: [   'user.User'],    stores: [        'user.User',        'user.Userform',        'user.UserTagTree'//用户信息编辑界面所用到的userTag树形store    ],    views:  [        'user.User.Grid',        'user.User.FormNew',        'user.User.FormEdit',        'user.User.FormEdit4Draft',        'user.User.FormDisplay',        'user.User.UserTagTree4Edit',        'user.User.GridEnabledUser',        'user.User.CommTree'    ]});



原创粉丝点击