您的位置:68399皇家赌场 > 服务器租用 > ExtJS肆下拉树组件

ExtJS肆下拉树组件

发布时间:2019-05-03 21:49编辑:服务器租用浏览(198)

    Ext.getDoc().on('keydown',function(e){
    if(e.getKey() == 8 && e.getTarget().type =='text' && !e.getTarget().readOnly){

    //化解在IE浏览器中input被安装成readonly时,点击Backspace时会出现网页回退
    document.onkeydown = check;
    function check(e) {
      var code;
      if (!e) var e = window.event;
      if (e.keyCode) code = e.keyCode;
      else if (e.which) code = e.which;
      if (((event.keyCode == 8) && //BackSpace
      ((event.srcElement.type != "text" &&
      event.srcElement.type != "textarea" &&
      event.srcElement.type != "password") ||
      event.srcElement.readOnly == true)) ||
      ((event.ctrlKey) && ((event.keyCode == 78) || (event.keyCode == 82)) ) || 
      (event.keyCode == 116) ) {
            event.keyCode = 0;
        event.returnValue = false;
      }
      return true;
    }

    /**
     *下拉树类(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.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(); 
            } 
        } 
    }); 
    选择示例代码

    }else if(e.getKey() == 8 && e.getTarget().type =='textarea' && !e.getTarget().readOnly){

    [javascript]

        name: 'smallType', 
    www.68399.com,    fieldLabel: '小类', 
        xtype: 'treecombox', 
        valueField: 'id', 
        displayField: 'text', 
        store: Ext.create('Ext.data.TreeStore', {  
            fields: ['text','id','parentId'], 
            root: { 
                text: '全体分类', 
                id: -1, 
                expanded: true 
            }, 
            proxy: {  
                type: 'ajax',  
                url: '../../basicdata/doQueryAllps.action' 
            } 
        }) 

    再来个效益图,下拉树的拉长率能够自定义,改造属性 maxPickerWidth就可以。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:ExtJS肆下拉树组件

    关键词: 68399皇家赌场