Results 1 to 4 of 4

Thread: Scrollbar in gridpanel

  1. #1
    Ext User
    Join Date
    May 2009
    Location
    Chennai
    Posts
    6

    Default Scrollbar in gridpanel

    Hi,
    I need to include scrollbar in this gridpanel,Can you guys suggest me how to implement it,and I've attached the screen shot of my Page.


    Code:
    Ext.onReady(function() {
    
        var names = Ext.data.Record.create([
    
        {
            name: 'firstName'
        },
        {
            name: 'lastName'
        }]);
    
        var myReader = new Ext.data.JsonReader({
            totalProperty: "results",
            root: "rows",
    
            /* bbar: new Ext.PagingToolbar({
                  pageSize: 3,
                  store: JsonStore
            })  */
    
            // id: "id"                           
        },
        names);
    
        var JsonStore = new Ext.data.JsonStore({
    
            proxy: new Ext.data.HttpProxy({
                url: 'ajax.jsp',
                reader: myReader,
                root: 'rows',
                totalProperty: 'results',
                id: 'id',
                fields: ['firstName', 'lastName'],
                view: new Ext.grid.GroupingView()
    
            }),
    
        });
        JsonStore.load();
    
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: JsonStore,
            frame: true,
            columns: [
            //{id:'id'},
            {
                header: "FirstName",
                width: 75
            },
            {
                header: "LastName",
                width: 75
            },
    
            ],
            //    autoScroll:true,
            
        
                listeners: {
                render: function(c) {
    
                    //  CSBfleXcroll();
                }
            },
            //stripeRows: true,
            //autoExpandColumn: 'FirstName',
            height: 350,
            width: 600,
            //  title:'Array Grid'
        });
    
        var combo = new Ext.form.ComboBox({
            store: JsonStore,
            displayField: 'firstName',
            fieldLabel: 'Names',
            typeAhead: true,
            mode: 'remote',
            forceSelection: true,
            triggerAction: 'all',
            emptyText: 'Select...',
            selectOnFocus: true,
            width: 150,
        });
    
        var userform = new Ext.form.FormPanel({
    
            renderTo: document.body,
            frame: true,
            title: 'UserRegistration',
            width: 350,
            items: [{
    
                xtype: 'textfield',
                id: 'firstName',
                fieldLabel: 'firstName',
                name: 'firstName',
                allowBlank: false,
                width: 150,
            },
            {
                xtype: 'textfield',
                id: 'lastName',
                fieldLabel: 'lastName',
                name: 'lastName',
                allowBlank: false,
                width: 150,
            },
            combo, grid,
    
            ],
    
            buttons: [{
                text: 'submit',
                handler: callAjax
    
            },
            {
                text: 'cancel',
                handler: callAjax
            }]
    
        });
    
    });
    
    callAjax = function() {
    
        var firstName = Ext.fly("firstName").getValue();
        var lastName = Ext.fly("lastName").getValue();
    
        Ext.Ajax.request({
            url: 'ajax.jsp',
            params: {
                firstName: firstName,
                lastName: lastName,
            },
    
            success: function(res, request) {
    
                // JsonStore.load();
                Ext.MessageBox.alert('Success', res.responseText);
            },
            failure: function(res, request) {
                Ext.MessageBox.alert('Failure', res.responseText);
    
            },
    
        });
    }
    Attached Images Attached Images

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    As I posted before, a GridPanel which is sized (as you have done) will get a scrollbar when necessary

    As you can SEE, the data does not overflow. Therefore no scrollbar

  3. #3
    Ext User
    Join Date
    May 2009
    Location
    Chennai
    Posts
    6

    Default Scrollbar

    Hi animal,
    Thanks,Now I reduced the height of the grid panel,I'm getting scroll bar,and for paging the grid,what I need to do.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Read the example code in your SDK.

    Read the docs.

Posting Permissions

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