Results 1 to 4 of 4

Thread: Help!! Grid + Paging Toolbar

  1. #1

    Default Help!! Grid + Paging Toolbar

    Hello Ext-Community,

    I have a problem with my GridPanel + PagingToolbar, it seems that the paging doesn't set into the bottom of tabpanel.

    Here's my code Layout.js

    var tabpanel = new Ext.TabPanel({
    resizeTabs:true,
    minTabWidth: 80,
    deferredRender:false,
    activeTab:0,
    enableTabScroll:true,
    defaults: {autoScroll:true},
    items:[{
    contentEl:'center1',
    title: 'Home',
    iconCls: 'home'
    },{
    contentEl:'center2',
    id:'catalog',
    title: 'Catalog',
    layout:'fit'
    }]
    });

    var viewport = new Ext.Viewport({
    layout:'border',
    items:[
    new Ext.BoxComponent({
    region:'north',
    el: 'north',
    height:32
    }),{
    region:'south',
    el: 'south',
    split:true,
    height: 100,
    minSize: 100,
    maxSize: 200,
    collapsible: true,
    title:'South',
    margins:'0 0 0 0'
    },{
    region:'east',
    title: 'East Side',
    collapsible: true,
    split:true,
    width: 225,
    minSize: 175,
    maxSize: 400,
    layout:'fit',
    margins:'0 5 0 0',
    items:
    new Ext.TabPanel({
    border:false,
    activeTab:1,
    tabPosition:'bottom',
    items:[{
    html:'<p>A TabPanel component can be a region.</p>',
    title: 'A Tab',
    autoScroll:true
    },
    new Ext.grid.PropertyGrid({
    title: 'Property Grid',
    closable: true,
    source: {
    "(name)": "Properties Grid",
    "grouping": false,
    "autoFitColumns": true,
    "productionQuality": false,
    "created": new Date(Date.parse('10/15/2006')),
    "tested": false,
    "version": .01,
    "borderWidth": 1
    }
    })]
    })
    },{
    region:'west',
    id:'west-panel',
    title:'West',
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    margins:'0 0 0 5',
    layout:'accordion',
    layoutConfig:{
    animate:true
    },
    items: [{
    contentEl: 'west',
    title:'Navigation',
    id: 'tree-div',
    border:false,
    iconCls:'nav'
    },{
    title:'Settings',
    html:'<p>Some settings in here.</p>',
    border:false,
    iconCls:'settings'
    }]
    },{
    region:'center',
    autoScroll:true,
    items:
    new Ext.Panel({
    title: 'Browsing Directory &nbsp;&nbsp;<a style="font-size:10px; color:#666666;
    font-family:arial" href="#" onclick="theDir=\'/\'; chDir(theDir);">Data Center</a>',
    header:true,
    id:'dashboard-panel',
    tbar: [{
    id: 'tb_register',
    icon: '../../mix_lib/extjs2/resources/images/default/custom/users.png',
    cls: 'x-btn-icon',
    tooltip: 'Register',
    handler: function() { openActionDialog('tb_register'); }
    }, '-',{
    id: 'tb_authentication',
    icon: '../../mix_lib/extjs2/resources/images/default/custom/login.gif',
    cls: 'x-btn-icon',
    tooltip: 'Login',
    handler: function() { openActionDialog('tb_authentication'); }
    }],
    items:[tabpanel]
    })
    }
    ]
    });

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var xg = Ext.grid;
    var sm = new xg.CheckboxSelectionModel();
    var cm = new xg.ColumnModel
    ([
    sm,
    {id: 'catalog', header: "Title", dataIndex: 'title', width: 377,css:'white-space:normal;'},
    {header: "Created on", dataIndex: 'createdDate', width: 150, hidden: false},
    {header: "guid", dataIndex: 'guid', width: 100, hidden: true}
    // {header: "", dataIndex: 'abc', width: 30, hidden: false, renderer: renderPicture}
    ]);

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar({
    pageSize: 25,
    store: ds,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No data to display",
    items:[
    '-', {
    pressed: false,
    enableToggle: true,
    text: 'Show Preview',
    cls: 'x-btn-text-icon details',
    toggleHandler: toggleDetails
    }
    ]
    });

    // create the editor grid
    var grid = new xg.GridPanel({
    ds: ds,
    cm: cm,
    sm: sm,
    bbar: paging,
    selModel: new xg.RowSelectionModel({singleSelect:false}),
    enableColLock:false,
    enableDragDrop: true,
    ddGroup: 'GridDD',
    loadMask: true,
    // height:326,
    // width:573,
    renderTo:'center2'
    });

    grid.render();

    is there any idea to fix my code,

    Thx
    Attached Images Attached Images

  2. #2
    Ext User santosh.rajan's Avatar
    Join Date
    Sep 2007
    Location
    Kannur, Kerala, India
    Posts
    611

    Default

    Please put your code within tags
    Make everything as simple as possible, but not simpler.
    - Albert Einstein

  3. #3

    Default

    here's the code :

    HTML Code:
    var tabpanel = new Ext.TabPanel({
        resizeTabs:true,
        minTabWidth: 80,
        deferredRender:false,
        activeTab:0,
        enableTabScroll:true,
        defaults: {autoScroll:true},
        items:[{
           contentEl:'center1',
           title: 'Home',
           iconCls: 'home'
        },{
           contentEl:'center2',
           id:'catalog',
           title: 'Catalog',
           layout:'fit'
    }]
    });
    
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
        new Ext.BoxComponent({
           region:'north',
           el: 'north',
           height:32
        }),{
           region:'south',
           el: 'south',
           split:true,
           height: 100,
           minSize: 100,
           maxSize: 200,
           collapsible: true,
           title:'South',
           margins:'0 0 0 0'
        },{
           region:'east',
           title: 'East Side',
           collapsible: true,
           split:true,
           width: 225,
           minSize: 175,
           maxSize: 400,
           layout:'fit',
           margins:'0 5 0 0',
           items:
        new Ext.TabPanel({
           border:false,
           activeTab:1,
           tabPosition:'bottom',
           items:[{
                html:'<p>A TabPanel component can be a region.</p>',
                title: 'A Tab',
                autoScroll:true
           },
        new Ext.grid.PropertyGrid({
           title: 'Property Grid',
           closable: true,
           source: {
                "(name)": "Properties Grid",
                "grouping": false,
                "autoFitColumns": true,
                "productionQuality": false,
                "created": new Date(Date.parse('10/15/2006')),
                "tested": false,
                "version": .01,
                "borderWidth": 1
        }
    })]
    })
    },{
        region:'west',
        id:'west-panel',
        title:'West',
        split:true,
        width: 200,
        minSize: 175,
        maxSize: 400,
        collapsible: true,
        margins:'0 0 0 5',
        layout:'accordion',
        layoutConfig:{
           animate:true
        },
        items: [{
           contentEl: 'west',
           title:'Navigation',
           id: 'tree-div',
           border:false,
           iconCls:'nav'
        },{
           title:'Settings',
           html:'<p>Some settings in here.</p>',
           border:false,
           iconCls:'settings'
        }]
    },{
        region:'center',
        autoScroll:true,
        items:
        new Ext.Panel({
           title: 'Browsing Directory &nbsp;&nbsp;<a style="font-size:10px; color:#666666;
           font-family:arial" href="#" onclick="theDir=\'/\'; chDir(theDir);">Data Center</a>',
           header:true,
           id:'dashboard-panel',
           tbar: [{
                id: 'tb_register',
                icon: '../../mix_lib/extjs2/resources/images/default/custom/users.png',
                cls: 'x-btn-icon',
                tooltip: 'Register',
                handler: function() { openActionDialog('tb_register'); }
           }, '-',{
                id: 'tb_authentication',
                icon: '../../mix_lib/extjs2/resources/images/default/custom/login.gif',
                cls: 'x-btn-icon',
                tooltip: 'Login',
                handler: function() { openActionDialog('tb_authentication'); }
           }],
           items:[tabpanel]
    })
    }
    ]
    });
    
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var xg = Ext.grid;
    var sm = new xg.CheckboxSelectionModel();
    var cm = new xg.ColumnModel
    ([
        sm,
       {id: 'catalog', header: "Title", dataIndex: 'title', width: 377,css:'white-space:normal;'},
       {header: "Created on", dataIndex: 'createdDate', width: 150, hidden: false},
      {header: "guid", dataIndex: 'guid', width: 100, hidden: true}
       // {header: "", dataIndex: 'abc', width: 30, hidden: false, renderer: renderPicture}
    ]);
    
    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar({
        pageSize: 25,
        store: ds,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No data to display",
        items:[
            '-', {
            pressed: false,
            enableToggle: true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: toggleDetails
       }
    ]
    });
    
    // create the editor grid
    var grid = new xg.GridPanel({
        ds: ds,
        cm: cm,
        sm: sm,
        bbar: paging,
        selModel: new xg.RowSelectionModel({singleSelect:false}),
        enableColLock:false,
        enableDragDrop: true,
        ddGroup: 'GridDD',
        loadMask: true,
        // height:326,
        // width:573,
        renderTo:'center2'
    });
    
    grid.render();
    Another problem is that when i try it in IE 6 the grid doesn't look to good different with FF

    please help!how to fix my code ..

    thx

  4. #4

    Default

    it's strange when i set

    HTML Code:
    var grid = new xg.GridPanel({
    	height:326,
            width:573
    });
    the grid 'n pagingToolbar looks OK (pic2.jpg->left picture) but if i press Ctrl + N in browser the grid height was change (pic3.jpg->right picture) n after refreshing many times the grid height back to original height.

    Why ?
    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
  •