1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Bangalore, India
    Posts
    147
    Answers
    3
    Vote Rating
    1
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar