UAS2.0_DEV_TEST/app/view/main/Main.js

/*
 * @Description: 修改样式
 * @Author: hy
 * @Date: 2019-08-12 17:59:33
 * @LastEditTime: 2019-08-13 08:59:31
 */
Ext.define('uas.view.main.Main', {
    extend: 'Ext.container.Viewport',

    controller: 'main',
    viewModel: 'main',
    layout: 'border',

    requires: [
        'Ext.layout.container.Border'
    ],
    
    items: [{
        region: 'north',
        xtype: 'toolbar',
        dock: 'top',
        height:48,
        items:[{
            xtype:'displayfield',
            value:'<h2 style="margin-top: 7px;">UAS2.0组件库</h2>',
        },'->',{
            xtype:'combo',
            width: 210,
            labelWidth:110,
            editable: false,
            fieldLabel:'当前主题&语言',
            store: Ext.create('Ext.data.Store', {
                fields: ['display', 'value'],
                data : [
                    {"display":"时尚蓝", "value": 'triton'},
                    {"display":"时尚灰", "value": 'crisp'},
                    {"display":"商务蓝", "value": 'neptune'},
                    {"display":"深邃黑", "value": 'aria'}
                ]
            }),
            cls:'x-desktop-combo',
            triggerAction: 'all',
            forceSelection: true,
            queryMode: 'local',
            displayField: 'display',
            valueField: 'value',
            listeners: {
                select: function(combo, records, obj){
                    setCookie('theme',combo.value,0);
                    window.location.reload();
                },
                beforerender:function(c){
                    c.setValue(getCookie('theme'))
                }
            }
        },{
            xtype:'combo',
            width: 110,
            labelWidth:0,
            editable: false,
            store: Ext.create('Ext.data.Store', {
                fields: ['display', 'value'],
                data : [
                    {"display":"简体中文", "value": 'zh_CN'},
                    {"display":"英语", "value": 'en_US'}
                ]
            }),
            cls:'x-desktop-combo2',
            triggerAction: 'all',
            forceSelection: true,
            queryMode: 'local',
            displayField: 'display',
            valueField: 'value',
            listeners: {
                select: function(combo, records, obj){
                    setCookie('locale',combo.value,0);
                    window.location.reload();
                },
                beforerender:function(c){
                    c.setValue(getCookie('locale'))
                }
            }
        }]
    },{
        region: 'west',
        collapsible: true,
        title: '目录',
        width: 260,
        split:true,
        layout: 'border',
        items: [{
            region: 'center',
            xtype: 'navigation-tree',
            tbar:{
                layout:'fit',
                items:[{
                    xtype: 'searchfield',
                    name: 'query',
                    emptyText: '请输入关键词',
                    store: 'Navigation',
                    onClearClick : function(){
                        var me = this;
                        me.setValue('');
                        me.store.clearFilter();
                        me.getTrigger('clear').hide();
                        me.updateLayout();
                    },
                    onSearchClick : function(){
                        var me = this,tree = me.ownerCt.ownerCt,
                            value = me.getValue();
                 
                        if (value.length > 0) {
                            me.store.clearFilter();
                            me.store.setRemoteFilter(false);
                            me.store.filter([{
                                filterFn: function(item) {
                                    item.expand();
                                    if(item.id == 'root'){
                                        return true; 
                                    }else if(!item.isLeaf()){
                                        let hasChild = item.findChildBy(function(item){
                                            return item.get('text').indexOf(value)>-1
                                        },item,5);
                                        if(hasChild){
                                            return true
                                        }else{
                                            return false
                                        }
                                    }else if(item.get('text').indexOf(value)>-1){
                                        return true; 
                                    }else{
                                        return false;
                                    }
                                }
                            }]);
                            me.getTrigger('clear').show();
                            me.updateLayout();
                        }else{
                            me.getTrigger('clear').hide();
                            me.store.clearFilter();
                        }
                    }
                },'->']
            }
        }]
    }, {
        split:true,
        region: 'center',
        xtype: 'contentPanel',
        reference: 'contentPanel',
        ariaRole: 'main'
    }]
});