1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    175
    Answers
    4
    Vote Rating
    2
    renganathan is on a distinguished road

      0  

    Default Answered: Fluid design - Help Needed

    Answered: Fluid design - Help Needed


    Hi all,

    I am trying to do fluid design in our project . I have one panel with one grid and one chart .

    But it shows only grid , chart is not showing .pls refer this image



    dashboard.jpg

    Here is my code . please tell me what i am doing wrong


    Code:
         
         var summaryGrid = Ext.create('Ext.grid.Panel', {
            store: summaryStore,
            anchor: '50%',
            columns: 
            [{
                text: 'Lab',
                sortable: true,
                dataIndex: 'lab'
                }, {
                text: 'Assets',
                sortable: true,
                dataIndex: 'asset'
                }, {
                text: 'Chassis',
                sortable: true,
                dataIndex: 'chassis'
                }, {
                text: 'EOL',
                sortable: true,
                dataIndex: 'eol'
            }],
            width: '50%',
            forceFit: true,
            viewConfig: {
                stripeRows: true
            }
        });
        
        var GraphPanel = Ext.create('Ext.form.Panel', {
        anchor: '50%',   
        width: '50%',
        id    : 'GraphPanel',
        loadMask : true,
        maximizable: true,
        layout: 'fit',
        stateful: false,
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                shadow: true,
                store: graphStore,
                 legend    : 
                {
                    position: 'bottom'
                },
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['assets'],
                    title: 'Assets',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Lab',
                    label: {
                        rotate: {
                            degrees: 360
                        }
                    }
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        renderer: function (storeItem, item) {
                            this.setTitle(storeItem.get('name') + ' : ' + storeItem.get('assets'));
                        }
                    },
                    xField: 'name',
                    yField: 'assets'
                }]
            }
        });
        var dashboard = new Ext.Panel(
        {
            layout: 'anchor',
            autoWidh: true,
            width : '100%',
            autoHeight: true,
            padding: 5,
            autoScroll: true,
            items: [
            {
                autoHeight: true,
                width : '100%',
                autoWidh: true,
                id      : 'IRP',
                xtype: 'panel',
                frame: false,
                autoScroll: true,
                items: 
                [
                    {
                        height: 300,
                        autoWidh: true,
                        id      : 'inventorypart',
                        xtype: 'panel',
                        title: 'Inventory',
                        collapsible: true,
                        layout: 
                        {
                            type: 'hbox',
                            align: 'stretch',
                            flex: 1 
                        },
                        items: 
                        [ 
                            GraphPanel,
                            summaryGrid
                        ]
                    }    
                ]
            }
        });
    Thanks,

    RENGANATHAN M G

  2. Panel attributes autoWidth: true and autoHeight: true are no longer supported in ExtJs 4.

    According to the API docs, width now only accepts a numeric value (not '100%'), where you're expected to use containers/layouts to handle percentage-based widths.

    Your dashboard panel should probably look something like this:

    Code:
        var dashboard = Ext.create('Ext.panel.Panel', {
          layout: {
            type: 'hbox',
            align: 'stretch'
          },
          width: 800,
          items: [{
            xtype: 'chart',
            flex: 1
            // rest of config...
          },{
            xtype: 'grid',
            flex: 1
            // rest of config...
          }]
        });
    If you're wanting the dashboard panel to occupy 100% of the page width, then you'll need to remove the width: 800 line above and set the dashboard panel to be the 'center' region of a Viewport.

  3. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Panel attributes autoWidth: true and autoHeight: true are no longer supported in ExtJs 4.

    According to the API docs, width now only accepts a numeric value (not '100%'), where you're expected to use containers/layouts to handle percentage-based widths.

    Your dashboard panel should probably look something like this:

    Code:
        var dashboard = Ext.create('Ext.panel.Panel', {
          layout: {
            type: 'hbox',
            align: 'stretch'
          },
          width: 800,
          items: [{
            xtype: 'chart',
            flex: 1
            // rest of config...
          },{
            xtype: 'grid',
            flex: 1
            // rest of config...
          }]
        });
    If you're wanting the dashboard panel to occupy 100% of the page width, then you'll need to remove the width: 800 line above and set the dashboard panel to be the 'center' region of a Viewport.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi