Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default Answered: Tab inside a grid.

    Answered: Tab inside a grid.


    Hi Guys,

    I am just wondering if its possible to add tabs inside a extjs grid. Actually my grid have more than 120 columns , so user have to scroll a lot to see all columns. To improve the view i am thinking of grouping the columns and putting each group in a tab. So on load user will see some mandatory columns and different tabs. To see the group info he/she can click on tab and see the the group info along with mandatory columns.

    Regards
    Rishi Saraf

  2. Like this?

    Code:
    Ext.onReady(function() {
    
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {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
        });
    
        var selModel = Ext.create('Ext.selection.RowModel', {
            mode : 'SIMPLE'
        });
    
        var panel = Ext.create('Ext.panel.Panel', {
            renderTo : Ext.getBody(),
            width    : 600,
            height   : 400,
            layout   : {
                type  : 'hbox',
                align : 'stretch'
            },
    
            items    : [
                {
                    xtype      : 'gridpanel',
                    flex       : 1,
                    store      : store,
                    selModel   : selModel,
                    title      : 'Left Grid',
                    columns    : [
                        {
                            text      : 'Company',
                            flex      : 1,
                            sortable  : false,
                            dataIndex : 'company'
                        }
                    ],
                    viewConfig : {
                        stripeRows : true
                    }
                },
                {
                    xtype : 'tabpanel',
                    flex  : 1,
                    items : [
                        {
                            xtype      : 'gridpanel',
                            title      : 'Grid 1',
                            store      : store,
                            selModel   : selModel,
                            columns    : [
                                {
                                    text      : 'Price',
                                    width     : 75,
                                    sortable  : true,
                                    renderer  : 'usMoney',
                                    dataIndex : 'price'
                                },
                                {
                                    text      : 'Last Updated',
                                    width     : 85,
                                    sortable  : true,
                                    renderer  : Ext.util.Format.dateRenderer('m/d/Y'),
                                    dataIndex : 'lastChange'
                                }
                            ],
                            viewConfig : {
                                stripeRows : true
                            }
                        },
                        {
                            xtype      : 'gridpanel',
                            title      : 'Grid 2',
                            store      : store,
                            selModel   : selModel,
                            columns    : [
                                {
                                    text      : 'Change',
                                    width     : 75,
                                    sortable  : true,
                                    dataIndex : 'change'
                                },
                                {
                                    text      : '% Change',
                                    width     : 75,
                                    sortable  : true,
                                    dataIndex : 'pctChange'
                                }
                            ],
                            viewConfig : {
                                stripeRows : true
                            }
                        }
                    ]
                }
            ]
        });
    
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,519
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Don't see why it couldn't be done... I personally wouldn't want to do it but I would start with creating a custom grid view.

    Also, what framework and version so I can move to the correct forum?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default


    Hi Mitchell,

    Actually currently we are using plain JSP and java script. Since it is getting difficult to maintain this application we are thinking of moving to some intelligent UI framework like ext JS. One of the criteria of using any framework will be the possibility of building user friendly and intelligent grid which can accommodate more than 100 columns and 1000 of rows. To avoid lot of horizontal scrolling I thought of this tab based grid.

    Regards
    Rishi Saraf

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,477
    Answers
    523
    Vote Rating
    280
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    ExtJS has built-in support for hiding/showing columns via a menu in the column headers. If you use grouped headers then several columns can be shown/hidden at once. Thought occurs that with a bit of JavaScript and some CSS trickery you could simulate tabbing that way.

    See:

    http://dev.sencha.com/deploy/ext-4.0...ader-grid.html

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,519
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you want tabs... you can do it the opposite... have many grids in many tabs using the same Store.... that way it is all "out-of-the-box" stuff.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,477
    Answers
    523
    Vote Rating
    280
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Using separate grids could be awkward for selections and vertical scrollbars. Not sure whether you can share a selection model between grids. If all the grids aren't in sync it could quickly get confusing.

  8. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,519
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by skirtle View Post
    Using separate grids could be awkward for selections and vertical scrollbars. Not sure whether you can share a selection model between grids. If all the grids aren't in sync it could quickly get confusing.
    Wouldn't see why you wouldn't be able to since the records will be the same... I'm almost intrigued to try myself
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #8
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default


    [QUOTE]
    Quote Originally Posted by skirtle View Post
    ExtJS has built-in support for hiding/showing columns via a menu in the column headers. If you use grouped headers then several columns can be shown/hidden at once. Thought occurs that with a bit of JavaScript and some CSS trickery you could simulate tabbing that way.
    skirtle I am aware about show and hide functionality but I don't want to use it because when user will try to see all the columns which is very likely to happen then he/she will have to do a lot of scrolling. And I am sure they will not like it.Basically currently we have grid something like below. When user click on + sign he/she see field inside that group. At a time only one group can be expanded using + . I wanted something similar in extjs grid .

    gridheader.JPG
    Attached Images
    Last edited by rishisaraf11; 9 Nov 2011 at 5:28 AM. Reason: adding quote

  10. #9
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Wouldn't see why you wouldn't be able to since the records will be the same... I'm almost intrigued to try myself
    Mitchell Skirtle is correct. Having a separate grid inside a tab will not be very good user experience specially during sorting. Moreover we want to put some field in common view so that user can see them always . As telephone number in
    below image. But yeah I'll try your suggestion and will see how it looks.

    gridheader.JPG

    Thanks .

  11. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,519
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sorting, filtering, selecting work across tabs (tested in both 4.0.7 and 4.1-PR1):

    Code:
    Ext.onReady(function() {
    
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {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
        });
    
        var selModel = Ext.create('Ext.selection.RowModel', {
            mode : 'SIMPLE'
        });
    
        var tabpanel = Ext.create('Ext.tab.Panel', {
            renderTo : Ext.getBody(),
            width    : 400,
            height   : 400,
    
            items    : [
                {
                    xtype      : 'gridpanel',
                    title      : 'Grid 1',
                    store      : store,
                    selModel   : selModel,
                    columns    : [
                        {
                            text      : 'Company',
                            flex      : 1,
                            sortable  : false,
                            dataIndex : 'company'
                        },
                        {
                            text      : 'Price',
                            width     : 75,
                            sortable  : true,
                            renderer  : 'usMoney',
                            dataIndex : 'price'
                        }
                    ],
                    viewConfig : {
                        stripeRows : true
                    }
                },
                {
                    xtype      : 'gridpanel',
                    title      : 'Grid 2',
                    store      : store,
                    selModel   : selModel,
                    columns    : [
                        {
                            text      : 'Change',
                            width     : 75,
                            sortable  : true,
                            dataIndex : 'change'
                        },
                        {
                            text      : '% Change',
                            width     : 75,
                            sortable  : true,
                            dataIndex : 'pctChange'
                        },
                        {
                            text      : 'Last Updated',
                            width     : 85,
                            sortable  : true,
                            renderer  : Ext.util.Format.dateRenderer('m/d/Y'),
                            dataIndex : 'lastChange'
                        }
                    ],
                    viewConfig : {
                        stripeRows : true
                    }
                }
            ]
        });
    
    });
    This is what you wanted no?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 2