使用 Ext JS 将树放入屏幕

Question

当我手动缩小屏幕大小时，视口不显示滚动条，我需要将按钮放在底部。

我尝试了 bbar、dockedItems、以不同的方式添加 treebuttons，但似乎没有任何效果。如果你能帮我解决底部按钮和滚动选项的高度问题，那就太好了。

提前致谢。

Ext.Loader.setConfig({
     enabled: true
});

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*',
]);

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.define('ServiceList', {
        extend: 'Ext.data.Model',
        fields: [
            {name:'id', type:'int'},
            {name:'name', type:'string'}
        ]
    });

var appStore = Ext.create('Ext.data.Store', {
        model: 'ServiceList',
        proxy: {
            type: 'ajax',
            url: 'json/appdata.json',
            reader: {
                root: 'services',
                type: 'json'
            }
        }
    });

Ext.define('treeModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'text',     type: 'string'},
        {name: 'column_id',     type: 'string'}
    ]
});

var treeAjax = Ext.Ajax.request({
     url: 'json/dynamicMenu.json',
     method: 'get', 
     success:function(response){
        console.log("treeAjax Success");
        tree_response = Ext.JSON.decode(response.responseText);
        var treeStore = Ext.create('Ext.data.TreeStore', {
            model : 'treeModel',
            root : tree_response.response.body
        });
        var app;
        var tree = Ext.create('Ext.tree.Panel', {
            forceFit: true,
            id :'treepanel',
            title: 'MENUS',
            cls:'parentIcon childIcon',
            autoScroll: true,
            border: false,
            useArrows: true,
            height: '100%',
            animate: true,
            rootVisible: false,
            store: treeStore,
            //scrollable: true,
            viewConfig: {
                plugins: {
                    ptype: 'treeviewdragdrop',
                    containerScroll: true
                }
            },
            items: [{
                xtype: 'treecolumn',
                id: 'treecolumn',
                sortable: true,
                dataIndex: 'text'
            }],
            listeners: { 
                itemclick: function(view, node) { 
                    description_panel.show();
                    nodeText=node.get('text');
                    nodeGiven=node.get('column_id');
                    Ext.getCmp('add').hide();
                    leafbox.reset();
                    Ext.getCmp('update').show();
                    Ext.getCmp('TFTxt').setValue(nodeText);
                    Ext.getCmp('TFGive').setValue(nodeGiven);
                    if(node.get('leaf')!=false)
                    {   
                        leafbox.hide();
                        appField.show();
                        description_panel.doLayout();
                        Ext.getCmp('addCol').disabled=true;
                    }
                    else
                    {   
                        leafbox.hide();
                        appField.hide();    
                        if (nodeText=="Edit"){
                            Ext.getCmp('addCol').disabled=false
                        }
                        else{
                            Ext.getCmp('addCol').disabled=true
                        }
                    };
                }, 
            }
        });

    var treeButton= Ext.create('Ext.panel.Panel',{
        id: 'treedetails',
        docked: 'bottom',
        items : [{
            xtype:'button',
            id : 'addMenu',
            enable : true,
            text:'Add Menu',
            handler:function() {
                appField.hide();
                Ext.getCmp('update').hide();
                Ext.getCmp('add').show();
                leafbox.show();
                description_panel.doLayout();
                description_panel.getForm().reset();
            }
        },
        {
            xtype:'button',
            text:'Add Column',
            id:'addCol',
            handler:function() {
                appField.hide();
                leafbox.hide();
                Ext.getCmp('update').hide();
                Ext.getCmp('add').show();
                description_panel.show();
                description_panel.getForm().reset();
            }
        },
        {
            xtype:'button',
            text:'Delete Record',
            handler:function() {
                alert('Data Has Been added');
                value3=Ext
                        .getCmp('treepanel')
                        .getSelectionModel()
                        .getLastSelected();
                value3.remove();
                leafbox.hide();
                appField.hide();
            }
        }]

     });

 var description_panel = Ext.create('Ext.form.Panel',{
        title: 'Menu Details',
        id: 'description_panel',
        autoScroll: true,
        flex: 1,
        scrollable: true,
        items : [{
            id : 'dataForm',
            items: [{
                xtype:'textfield',
                id: 'TFTxt',
                name: 'as',
                fieldLabel: 'Text',
                allowBlank:false,
                listeners : {
                    el:{
                        delegate : 'input',
                        click    : function() {
                               Ext.getCmp('TFTxt').focus(true);
                        }
                    }
                }
            },
            {
                xtype:'textfield',
                fieldLabel: 'Column ',
                name: 'as',
                id: 'TFGive',
                allowBlank:false,
                listeners:{
                    el:{
                        delegate : 'input',
                        click    : function() {
                               Ext.getCmp('TFGive').focus(true);
                            }
                    }
                }
            }],
            buttons:[{
                id:'add',
                text:'Add',
                width:10,
                handler:function() {
                    value3 = Ext
                              .getCmp('treepanel')
                              .getSelectionModel()
                              .getLastSelected();
                    value1 = Ext.getCmp('TFTxt').getValue();
                    value2 = Ext.getCmp('TFGive').getValue();
                    value4 = Ext
                              .getCmp('leafselection')
                              .items
                              .get(0)
                              .getGroupValue();
                    noderesult=nodecheck(value1, value3);
                    if(noderesult==true){   
                        if(value4=='2'){
                            var insertvalues = value3.createNode({
                                text:value1, 
                                column_id:value2, 
                                leaf: false
                            });
                        }
                        else{
                            var insertvalues = value3.createNode({
                                text:value1, 
                                column_id:value2, 
                                leaf: true
                            });
                        }

                        value3.appendChild(insertvalues);
                        alert('The menu has been added. Please expand to see the added menu');
                    }
                    else{
                        alert('Please choose a diffrent Name . Name already exist');
                        Ext.getCmp('TFTxt').focus(true);
                    }
                }
            },
            {
                id:'update',
                text:'Update',
                width:10,
                handler:function() {
                    value3 = Ext
                              .getCmp('treepanel')
                              .getSelectionModel()
                              .getLastSelected();
                    console.log(value3.parentNode)
                    value1 = Ext.getCmp('TFTxt').getValue();
                    value2 = Ext.getCmp('TFGive').getValue();
                    value4 = Ext
                              .getCmp('leafselection')
                              .items
                              .get(0)
                              .getGroupValue();
                    noderesult = nodecheck(value1, value3);
                    if(noderesult==true){
                        if(value4=='2'){
                            var updatevalues = value3.set({
                                text:value1, 
                                column_id:value2, 
                                leaf: false
                            });
                        }
                        else{
                            var updatevalues = value3.set({
                                text:value1, 
                                column_id:value2, 
                                leaf: true
                            });
                        }
                        alert('The Data has been edited.');
                    }
                    else{
                        alert('Please choose a diffrent Name. Name already exist');
                        Ext.getCmp('TFTxt').focus(true);
                    }
                }
            }]
        }] ,
        listeners:{
            render : function(){
                this.hide();
            }
        } 
    });

var appField =new Ext.form.ComboBox({
    fieldLabel: 'Application',
    id:'appchoice',
    store: appStore,
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    mode: 'local',
    emptyText:'Choose number...',
    selectOnFocus:true,
    listeners : {
        'select' : function(combo, record){
            app=record[0];
            console.log(app);
        },
        render : function(){
            this.hide();
        }
    }
});

Ext.getCmp('dataForm').add(appField).hide;
description_panel.doLayout(); 
var leafbox =new Ext.form.RadioGroup({  
    id: 'leafselection',
    fieldLabel: 'Node Detail',
    columns: 1,
    items: [
        {boxLabel: 'Leaf', name: 'data', inputValue: 1},
        {boxLabel: 'Non Leaf', name: 'data', inputValue: 2, },
    ],
    listeners : {
        render : function(){
            this.hide();
        },
        change: function(radiogroup, radio) {
            if(radio.data==1){
                appField.show();
            }
            else{
                appField.hide();
            }
        }
    }
});

Ext.getCmp('dataForm').add(leafbox).hide;
description_panel.doLayout(); 
var panel = Ext.create('Ext.Viewport',{
    draggable: true,
    //width:'100%',
    //height: '100%',
    autoHeight : true,
    scrollable : true,
    //autoScroll: true,
    id : 'container',
    renderTo : Ext.getBody(),
    layout: 'hbox',
    border : true,
    items : [{
        width : '30%',
        height: '100%',
        items : [tree, treeButton]
    },
    {
        width : '70%',
        height: '100%',
        items : description_panel
    }]
});
panel.doLayout();
function nodecheck(typedname,nodedata){
    var name=typedname;
    var data=nodedata;
    if(data.parentNode.get('text')==name){
        console.log(data.parentNode.get('text'));
        return false
    }
    else{
        data.parentNode.eachChild(function(child){
        console.log("child functon");
        if(child.get('text')==name){
            console.log(child.get('text'));
            return false
        }
    });
    if(data.hasChildNodes()){
        console.log(" data child enter");
        data.eachChild(function(child){
        if(child.get('text')==name){
            console.log(child.get('text'));;
            return false
        }
    });
    };
}
return true
};
}
});
});

Answer 1

在您的面板配置中，尝试将布局从 'hbox' 更改为 'fit' 并删除自动高度线

Answer 2

我在视口中使用带水平框的边框布局。

        var panel = Ext.create('Ext.Viewport',{
                                    draggable: true,
                                    autoHeight : true,
                                    autoScroll: true,
                                    id : 'container',
                                    renderTo : Ext.getBody(),
                                    layout: 'hbox',
                                    border : true,
                                    //defaults:{ width: '30%'},
                                    items : [{
                                            xtype: 'container',                                         
                                            width : '30%',
                                            height: '100%',
                                            layout: 'border',
                                            items : [{
                                                region: 'north',
                                                height: '96%',
                                                items: [tree]
                                                },{
                                                region:'south',
                                                height:'4%',
                                                items: [treeButton]
                                                }]
                                            },{
                                            xtype: 'container',                                         
                                            width : '70%',
                                            height: '100%',
                                            layout: 'border',
                                            items : [{
                                                region: 'north',
                                                height: '96%',
                                                items: [description_panel]
                                                },{
                                                region:'south',
                                                height:'4%',
                                                items: [description_panelButton]
                                                }]
                                        }]
                });

使用 Ext JS 将树放入屏幕

Fitting the tree into the screen with Ext JS

javascript

containers

extjs

treepanel

extjs4