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
    8,912
    Answers
    655
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi