1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    8
    Vote Rating
    0
    siddmuk2005 is on a distinguished road

      0  

    Default Unanswered: How to handle Browser Vertical and Horizontal Scrollbar as GridPanel Scrollbar

    Unanswered: How to handle Browser Vertical and Horizontal Scrollbar as GridPanel Scrollbar


    Hello,

    I have tried to make Browser vertical and horizontal scroll bar as GridPanel Vertical and horizontal Scroll bar. But not able to do. Please help urgently. any Help appreciated

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    667
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please describe in more detail what you are trying to do .. If you place the grid in a viewport and make the layout: fit and add a grid ?

    There is a lot of room in your comment.

    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    8
    Vote Rating
    0
    siddmuk2005 is on a distinguished road

      0  

    Default Handle GridPanel vertical and horizontal ScrollBar with browser scrollbar

    Handle GridPanel vertical and horizontal ScrollBar with browser scrollbar


    Hello Dear,

    Thanks for promopt response.

    I have gridpanel with 1000 rows. so vertical scroll bar is there to navigate the rows within gridpanel. I want that my browser vertical scroll bar sould have control for gridpanel row navigation and i don't want panel scrollbar. My Code is as follows:

    state.js is as follows:


    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
    'Ext.grid.*',
    'Ext.window.Window',
    'Ext.container.Viewport',
    'Ext.layout.container.Border',
    'Ext.state.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.PagingScroller',
    'Ext.ux.grid.FiltersFeature',
    ]);



    Ext.onReady(function(){

    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    /**
    * Custom function used for column renderer
    * @param {Object} val
    */
    function change(val) {
    if (val > 0) {
    return '<span style="color:green;">' + val + '</span>';
    } else if (val < 0) {
    return '<span style="color:red;">' + val + '</span>';
    }
    return val;
    }

    /**
    * Custom function used for column renderer
    * @param {Object} val
    */
    function pctChange(val) {
    if (val > 0) {
    return '<span style="color:green;">' + val + '%</span>';
    } else if (val < 0) {
    return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
    }

    var store = Ext.create('Ext.data.Store', {
    storeId: 'myGridStore',
    id:'myGridStore',
    remoteSort: false,
    autoDestroy: true,
    pageSize: 100,
    //buffered: true,
    purgePageCount: 0,
    remoteFilter: true,//need to configure for locakable grid
    sorters: [{
    property: 'first',
    direction: 'ASC'
    }],
    fields: [
    {name: 'first'},
    {name: 'last'},
    {name: 'age', type: 'int'},
    {name: 'review'},
    {name: 'Prasent'},
    {name: 'Permanent'},
    {name: 'College'},
    {name: 'Father'},
    {name: 'company'},
    {name: 'price', type: 'float'},
    {name: 'change', type: 'float'},
    {name: 'pctChange', type: 'float'},
    {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

    ],
    data: myData,
    proxy: {
    type: 'memory',
    reader: {
    type: 'json',
    totalProperty: 'totalCount'
    }
    }

    });


    var gridHeaderFilters = Ext.create('Ext.ux.grid.GridHeaderFilters', {
    // set any properties here GridHeaderFilters.js
    });



    // create the Grid
    var myGridPanel = Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('myGridStore'),//store,
    columnLines: true,
    cls: 'grid',
    /*verticalScroller: {
    xtype: 'paginggridscroller',
    activePrefetch: false
    },*/
    loadMask: true,
    disableSelection: false,//changed here from true to false
    invalidateScrollerOnRefresh: false,
    viewConfig: {
    trackOver: false
    },
    plugins: [gridHeaderFilters],
    headerFilters: {},
    dockedItems: [
    {
    xtype: 'toolbar',
    dock: 'top',
    items: [
    {
    xtype: 'button',
    text: 'Reset Filters',
    handler: function(){
    myGridPanel.resetHeaderFilters();
    }
    },
    {
    xtype: 'button',
    text: 'Clear Filters',
    handler: function(){
    myGridPanel.clearHeaderFilters();
    }
    },
    {
    xtype: 'button',
    text: 'Apply Filters',
    handler: function(){
    myGridPanel.applyHeaderFilters();
    }
    }
    ]
    }
    ],

    columns: [
    /*{
    xtype: 'rownumberer',
    width: 50,
    sortable: false
    },*/
    {
    text: 'First Name',
    dataIndex: 'first',
    width: 70,
    flex: 1.3,
    allowBlank: false,
    locked : true,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter:{
    encode: false,
    local: true,
    xtype: 'textfield',
    filterName: 'first',
    filterLabel: 'First Name'
    }
    },
    {
    text : 'Last Name',
    dataIndex: 'last',
    width: 70,
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "last",
    filterLabel: 'Last Name'
    }
    },{
    text : 'Age',
    dataIndex: 'age',
    width: 40,
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "age"
    }

    },{
    text : 'Review',
    dataIndex: 'review',
    width: 100,
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },

    filter: {
    xtype: "textfield",
    filterName: "review"
    }

    },{
    text : 'Prasent Address',
    dataIndex: 'Prasent',
    width: 125,
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "Prasent"
    }

    },{
    text : 'Permanent Address',
    dataIndex: 'Permanent',
    width: 100,
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "Permanent"
    }

    },{
    text : 'College',
    dataIndex: 'College',
    width: 70,
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "College"
    }

    },{
    text : 'Father Name',
    dataIndex: 'Father',
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "Father"
    }
    },{
    text : 'Company Name',
    dataIndex: 'company',
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "company"
    }

    },{
    text : 'Fee',
    renderer : 'usMoney',
    dataIndex: 'price',
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "price"
    }

    },{
    text : 'Change',
    renderer : change,
    dataIndex: 'change',
    flex: 1,
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: "textfield",
    filterName: "change"
    }

    },{
    dataIndex: 'pctChange',
    flex: 0.8,
    text: '% Change',
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false,
    vtype: 'alphaSpace'
    },
    filter: {
    xtype: 'textfield',
    filterName: 'Change',
    filterLabel: 'Change'
    }
    },{
    dataIndex: 'lastChange',
    flex: 1,
    text: 'Name',
    allowBlank: false,
    field: {
    type: 'textfield',
    allowBlank: false
    },
    filter: {
    xtype: 'textfield',
    filterName: 'lastChange',
    filterLabel: 'lastChange'
    }
    }

    ],
    //height: document.body.clientHeight,
    width: document.body.clientWidth
    //title: 'Locking Grid Column with ext-js 4.1'
    });

    myGridPanel.on('edit', function(e) {
    e.record.save();
    });
    //store.guaranteeRange(0, 50); don't apply this other wise data will not come
    myGridPanel.getStore().on('load', function anonym(){
    myGridPanel.setHeight(this.getCount() * 16); // to be calculated
    });


    var centerPanel=new Ext.Panel({
    id: 'centerPanel',
    region: 'center', // a center region is ALWAYS required for border layout
    layout: 'card',
    activeItem:0,
    height: document.body.clientHeight,
    width: document.body.clientWidth,
    items: [
    myGridPanel
    ]
    //,renderTo:'myViewPortDiv'
    });

    /*var win = new Ext.Window({
    applyTo:'myViewPortDiv',
    layout:'fit',
    //height: document.body.clientHeight,
    //width: document.body.clientWidth,
    closeAction:'hide', //'close' - destroy the component
    plain: true,
    items: myGridPanel
    });
    win.show();*/
    var htmlData='<div>hello</div>';

    Ext.create('Ext.container.Viewport', {
    layout:'border',
    renderTo:'myViewPortDiv',
    items: [
    {
    region: 'center',
    id: 'mainPanel',
    layout: 'border',
    frame: false,
    border:false,
    items: [centerPanel]
    }
    ]
    });
    });

    HTMl file is as follows:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Maintaining Component State Sample</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    <style type="text/css">
    .grid {
    margin: 0 auto;
    position: relative;
    width: 700px;
    margin-top: 5px;
    }
    .add {
    background: url('../writer/images/add.png');
    }
    .delete {
    background: url('../writer/images/delete.png');
    }
    .save {
    background: url('../writer/images/save.gif');
    }

    </style>


    <!-- GC -->

    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="GridHeaderFilters.js"></script>
    <script type="text/javascript" src="griddata.js"></script>
    <script type="text/javascript" src="state.js"></script>
    </head>
    <body>
    </body>
    </html>

    griddata.js file is as follows:

    var myData= [{
    first: 'John',
    last: 'Smith',
    age: 32,
    review: 'Solid performance, needs to comment code more!',
    Prasent:'Noida',
    Permanent:'Obra',
    College:'Bhopal University',
    Father:'Albert Aienstien',
    company:'3m Co',
    price:71.72,
    change: 0.02,
    pctChange: 0.03,
    lastChange:'9/1 12:00am'


    }, {
    first: 'Jane',
    last: 'Brown',
    age: 56,
    review: 'Excellent worker, has written over 100000 lines of code in 3 months. Deserves promotion.',
    Prasent:'Noida',
    Permanent:'Obra',
    College:'Bhopal University',
    Father:'Albert Aienstien',
    company:'3m Co',
    price:71.72,
    change: 0.02,
    pctChange: 0.03,
    lastChange:'9/1 12:00am'


    }, {
    first: 'Kevin',
    last: 'Jones',
    age: 25,
    review: 'Insists on using one letter variable names for everything, lots of bugs introduced.',
    Prasent:'Noida',
    Permanent:'Obra',
    College:'Bhopal University',
    Father:'Albert Aienstien',
    company:'3m Co',
    price:71.72,
    change: 0.02,
    pctChange: 0.03,
    lastChange:'9/1 12:00am'


    }, {
    first: 'Will',
    last: 'Zhang',
    age: 41,
    review: 'Average. Works at the pace of a snail but always produces reliable results.',
    Prasent:'Noida',
    Permanent:'Obra',
    College:'Bhopal University',
    Father:'Albert Aienstien',
    company:'3m Co',
    price:71.72,
    change: 0.02,
    pctChange: 0.03,
    lastChange:'9/1 12:00am'


    }, {
    first: 'Sarah',
    last: 'Carter',
    age: 23,
    review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.',
    Prasent:'Noida',
    Permanent:'Obra',
    College:'Bhopal University',
    Father:'Albert Aienstien',
    company:'3m Co',
    price:71.72,
    change: 0.02,
    pctChange: 0.03,
    lastChange:'9/1 12:00am'

    }, {
    first: 'Sarah',
    last: 'Carter',
    age: 23,
    review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.',
    Prasent:'Noida',
    Permanent:'Obra',
    College:'Bhopal University',
    Father:'Albert Aienstien',
    company:'3m Co',
    price:71.72,
    change: 0.02,
    pctChange: 0.03,
    lastChange:'9/1 12:00am'

    }];

    GirdHeaderFileter is extjs plugin

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    8
    Vote Rating
    0
    siddmuk2005 is on a distinguished road

      0  

    Default How to handle Browser Vertical and Horizontal Scrollbar as GridPanel Scrollbar

    How to handle Browser Vertical and Horizontal Scrollbar as GridPanel Scrollbar


    Still waiting for reply.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    8
    Vote Rating
    0
    siddmuk2005 is on a distinguished road

      0  

    Default How to handle Browser Vertical and Horizontal Scrollbar as GridPanel Scrollbar

    How to handle Browser Vertical and Horizontal Scrollbar as GridPanel Scrollbar


    Hello Dear,

    I have changed the code now i want: Please give some example to make floating Grid header so that when i will scroll down with browser i can see the rows and floating header for column rows data on top on browser.

    PLS REPLY.

Thread Participants: 1

Tags for this Thread