JSFiddle - React, Tailwind, and code Playground

Ext example of panel with switching between showing two grids.

by Ben Clayton

HTML

<link rel="stylesheet" href="http://infxsolutions.com/script/Ext_V3.0/css/ext-all.css">
<link rel="stylesheet" href="http://infxsolutions.com/script/Ext_V3.0/css/xtheme-gray.css">
<div id="ext_view" style="solid;height:200px;width:400px;margin-left:auto;margin-right:auto"></div>

Working

CSS

body { margin-top:20px }

.rule_description {
            font-family:arial;
            font-size:12px;
            text-overflow:ellipsis;
            white-space:nowrap; 
            width:12em; 
            overflow:hidden; 
            //border:1px solid #000000;
            padding-left:10px;
            width:70%;
 
}

JavaScript

var pp = new Ext.Panel({
        height: 170,
        layout: 'vbox',
        title: 'Switch Trees',
        renderTo: 'ext_view',
        tbar:[
            {
                text: 'Tree 1', handler: function(){
                    pp.removeAll();
                    pp.add(new  Ext.tree.TreePanel({
                         root: { text: 'Tree 1'}
                    }));
                    pp.doLayout();
                }
            },
            {
                text: 'Tree 2', handler: function(){
                    pp.removeAll();
                    pp.add(new  Ext.tree.TreePanel({
                         root: { text: 'Tree 2'}
                    }));
                    pp.doLayout();
                }
            }
        ],
        items: []
    });
    //alert('load complete');