ExtJS Viewport layout problem

Use viewport layout in ExtJS, need to put more than one grid left West, but use the folding effect, only the first folding in the grid can display properly, the folding in the grid display has a problem, do not know is how to return a responsibility? If you do not use a folding effect, so is all the grid can be displayed properly.
The test.html page

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../../ext-all.js"></script>

	<script type="text/javascript" src="viewport.js"></script>
    <script type="text/javascript" src="array-grid1.js"></script>
	<script type="text/javascript" src="array-grid2.js"></script>
	<script type="text/javascript" src="array-grid3.js"></script>

    <link rel="stylesheet" type="text/css" href="grid-examples.css" />

    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<script language="javascript" >
	function ready()
	{
		viewport();
		grid1();
		grid2();
		grid3();
	}
	Ext.onReady(ready);
</script>
</body>
</html>

viewport.js

function viewport() { 
    new Ext.Viewport({
        layout: 'border',
        items: [
            { region: 'north', title: 'head', margins: '0 0 5 0' },
            { region: 'south', title: 'footer', margins: '5 0 0 0' },
            {
                region: 'west',
                split: true,
                margins: '0 0 0 0',
                layout: 'accordion',//If changed to'form'3 grid can display properly, but there is no default folding effect. 
                width: 350,
                collapsible: true,
                title: 'Query menu',
                layoutConfig:
                {
                    animate: true
                },
                items:
                [
                    
                    {
                        title: 'Query',
                        border: true,
                        html: '<div id="grid-example"></div>'
                    },
                    {
                        title: 'Query 2',
                        border: true,
                        html: '<div id="grid-example2"></div>'
                    },
                    {
                        title: 'Query 3',
                        border: true,
                        html: '<div id="grid-example3"></div>'
                    }
                ]
            },
            { region: 'center', title: 'content' }
        ]
    });
}

array-grid1.js


function grid1(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val <0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val <0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:200,
        width:300,
        title:'Array Grid'
    });

    grid.render('grid-example');
}

Started by Woodrow at November 07, 2016 - 10:29 PM

The remaining two papers and array-grid1.js is the same, only the function name.

array-grid2.js

function grid2(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var myData = [
		['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val <0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val <0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:200,
        width:300,
        title:'Array Grid'
    });

    grid.render('grid-example2');
}

array-grid3.js


function grid3(){
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var myData = [
		['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];

    function change(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val <0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    function pctChange(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val <0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:200,
        width:300,
        title:'Array Grid'
    });

    grid.render('grid-example3');
}

Posted by Woodrow at November 12, 2016 - 10:57 PM

I always take this property is set to border

Posted by Vincent at November 20, 2016 - 11:56 PM

Friendship Bangding.

Posted by Gerald at November 29, 2016 - 12:56 AM

Grid should be rendered to the page in the Chinese ID repeats.

Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var myData = [
        ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
        ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
        ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
        ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
        ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
        ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
        ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
        ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
        ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
        ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
        ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
        ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
        ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
        ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
        ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
        ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
        ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
        ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
        ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
        ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
        ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
        ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
        ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
        ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
        ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
        ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
    ];

    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val <0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val <0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    var store1 = new Ext.data.SimpleStore({
        fields: [
           { name: 'company' },
           { name: 'price', type: 'float' },
           { name: 'change', type: 'float' },
           { name: 'pctChange', type: 'float' },
           { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
        ]
    });
    store1.loadData(myData);

    var grid1 = new Ext.grid.GridPanel({
        store: store1,
        columns: [
            { id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },
            { header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price' },
            { header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change' },
            { header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange' },
            { header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 200,
        width: 300,
        title: 'Array Grid'
    });
    //////////////////////////////////////
    var store2 = new Ext.data.SimpleStore({
        fields: [
           { name: 'company' },
           { name: 'price', type: 'float' },
           { name: 'change', type: 'float' },
           { name: 'pctChange', type: 'float' },
           { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
        ]
    });
    store2.loadData(myData);

    var grid2 = new Ext.grid.GridPanel({
        store: store2,
        columns: [
            { id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },
            { header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price' },
            { header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change' },
            { header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange' },
            { header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 200,
        width: 300,
        title: 'Array Grid'
    });
    //////////////////////////
    var store3 = new Ext.data.SimpleStore({
        fields: [
           { name: 'company' },
           { name: 'price', type: 'float' },
           { name: 'change', type: 'float' },
           { name: 'pctChange', type: 'float' },
           { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
        ]
    });
    store3.loadData(myData);

    var grid3 = new Ext.grid.GridPanel({
        store: store3,
        columns: [
            { id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' },
            { header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price' },
            { header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change' },
            { header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange' },
            { header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 200,
        width: 300,
        title: 'Array Grid'
    });
    new Ext.Viewport({
        layout: 'border',
        items: [
            { region: 'north', title: 'head', margins: '0 0 5 0' },
            { region: 'south', title: 'footer', margins: '5 0 0 0' },
            {
                region: 'west',
                split: true,
                margins: '0 0 0 0',
                layout: 'accordion', //If changed to'form'3 grid can display properly, but there is no default folding effect. 
                width: 500,
                collapsible: true,
                title: 'Query menu',
                layoutConfig:
                {
                    animate: true
                },
                items:
                [

                    {
                        title: 'Query',
                        border: true,
                        layout:"fit",
                        items:grid1
                    },
                    {
                        title: 'Query 2',
                        border: true,
                        layout:"fit",
                        items:grid2
                    },
                    {
                        title: 'Query 3',
                        border: true,
                        layout:"fit",
                        items:grid3
                        
                    }
                ]
            },
            { region: 'center', title: 'content' }
        ]
    });
});

Posted by Eden at December 01, 2016 - 1:47 AM

It must be Ext.onReady (function () {}).?

Posted by Howard at December 08, 2016 - 1:55 AM

The grid directly into the viewport panel items don't render. viewport layout will render

Posted by Mayme at December 23, 2016 - 2:13 AM

ExtJS Viewport layout problem

Latest Questions