Results 1 to 5 of 5

Thread: GridPanel, IE6 and width

  1. #1
    Sencha User zeroed's Avatar
    Join Date
    Aug 2008
    Location
    Washington DC
    Posts
    135

    Default GridPanel, IE6 and width

    Hi,

    I have a problem with the subj.

    1. I have tab panel.
    2. I add new Panel to it.

    Code:
    Lwp.ArtifactsPanel = function(protocolName, protocolVersion, directory) {
        this.protocolName = protocolName;
        this.protocolVersion = protocolVersion;
        this.directory = directory;
    };
    
    Ext.extend(Lwp.ArtifactsPanel, Ext.Panel, {
    
        listeners: {
            'render': function() {
                this._initialize();
            }
        },
    
        protocolName: null,
        protocolVersion: null,
        directory: null,
    
        title: 'Experiments',
        id: 'experiments',
        autoScroll: true,
        layout: 'fit',
        frame: false,
    
        items: [
            {
                border: false,
                autoScroll: true,
                bodyStyle: 'padding: 15px 15px 15px 15px',
                items: [
                    {
                        html: 'Loading data...',
                        border: false
                    }
                ],
                id: 'artifactsCenter'
            }
        ],
    
        _initialize: function() {
            var updater = new Ext.DwrGlobalHintUpdate();
            updater.update(ProtocolArtefactsProvider.getProtocolArtefacts, [this.protocolName,this.protocolVersion, 'lib'], this._dataLoaded.createDelegate(this));
        },
    
        _dataLoaded: function(data) {
            var newTestPanel = new Ext.Panel({
                html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
                bodyStyle: 'margin-top: 15px'
            });
            var anotherTestPanel = new Ext.Panel({
                html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
                bodyStyle: 'margin-top: 15px'
            });
            var newTestPanel1 = new Ext.Panel({
                html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
                bodyStyle: 'margin-top: 15px'
            });
            var anotherTestPanel1 = new Ext.Panel({
                html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
                bodyStyle: 'margin-top: 15px'
            });
            var newTestPanel2 = new Ext.Panel({
                html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
                bodyStyle: 'margin-top: 15px'
            });
            var anotherTestPanel2 = new Ext.Panel({
                html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
                bodyStyle: 'margin-top: 15px'
            });
            var newTestPanel3 = new Ext.Panel({
                html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
                bodyStyle: 'margin-top: 15px'
            });
            var anotherTestPanel3 = new Ext.Panel({
                html: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?',
                bodyStyle: 'margin-top: 15px'
            });
    
            var artifactsGrid = new Lwp.ArtifactsGrid({'totRec':data.resources.length,'records':data.resources});
    
            var gridPanel= new Ext.Panel({
                layout: 'fit',
                style: 'margin-top: 15px;',
                border: false,
                items: [artifactsGrid]
            });
    
            this.changeCenterContent([newTestPanel, gridPanel, anotherTestPanel, newTestPanel1, anotherTestPanel1, newTestPanel2, anotherTestPanel2, newTestPanel3, anotherTestPanel3]);
        },
    
        changeCenterContent: function(newContent) {
            if (!newContent) return;
    
            var artifactsCenterPanel = Ext.getCmp('artifactsCenter');
            artifactsCenterPanel.removeAll(true);
    
            if (Ext.isArray(newContent)) {
                Ext.each(newContent, function(item) {
                    this.add(item);
                }, artifactsCenterPanel);
            } else {
                artifactsCenterPanel.add(newContent);
            }
            artifactsCenterPanel.doLayout();
        },
    
        toString: function() {
            return "Lwp.ArtifactsGrid";
        }
    });
    This panel have a lot of items and on of the item is grid panel:

    Code:
    Lwp.ArtifactsGrid = function(data) {
    
        var reader = new Ext.data.JsonReader({
            totalProperty: 'totRec',
            root: 'records'
        }, [
            {name: 'name'},
            {name: 'length'},
            {name: 'date'},
            {name: 'url'}
        ]);
    
        this.store = new Ext.data.Store({
            reader: reader,
            data: data,
            sortInfo:{field: 'type', direction: "ASC"},
            remoteSort: true,
            autoLoad: true
        }),
        this.columns = [
            {header: "Name", width: 50, sortable: false, dataIndex: 'name'},
            {header: "Size", width: 50, sortable: false, dataIndex: 'length'},
            {header: "Date", width: 50, sortable: false, dataIndex: 'date'}
        ];
    
        this.view = new Ext.grid.GridView({
            forceFit:true,
            emptyText: 'Artifacts not found'
        });
    
        this.enableHdMenu = false;
        this.autoHeight = true;
    };
    
    Ext.extend(Lwp.ArtifactsGrid, Ext.grid.GridPanel, {});
    In internet explorer 6 the width of grid panel is very big. Everything is ok in FF.

    What can I do?

  2. #2
    Sencha User zeroed's Avatar
    Join Date
    Aug 2008
    Location
    Washington DC
    Posts
    135

    Default

    Here is the screenshot from IE6.

    Anybody, please?
    Attached Images Attached Images

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    set a width on the grids parent.

  4. #4
    Sencha User zeroed's Avatar
    Join Date
    Aug 2008
    Location
    Washington DC
    Posts
    135

    Default

    Quote Originally Posted by [email protected] View Post
    set a width on the grids parent.
    Hi,

    I set up the width:

    Code:
            var gridPanel = new Ext.Panel({
                layout: 'fit',
                style: 'margin-top: 15px;',
                border: false,
                title: 'Just a test grid',
                width: 700,
                items: [artifactsGrid]
            });
    Now I have two questions:

    1. Isn't it possible to set width to auto? Because in this case it will not be dinamic. Any way: it's better than nothing, I can setup width to all components on the page..
    2. In IE6 grid headers dissapaired. Look at the screenshot.
    Attached Images Attached Images

  5. #5
    Sencha User zeroed's Avatar
    Join Date
    Aug 2008
    Location
    Washington DC
    Posts
    135

    Default

    Ok,

    I have deleted autoHeight from grid panel and now I see grid headers.

    But now I also see scrolling.
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •