1. #121
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    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 Soenhay View Post
    I do this by getting the new column information from a previous view then destroying and recreating the grid with the new column information........ If there is a better way I would also like to know.
    I can brainstorm on a better way to be built in but you could execute this:

    Code:
    var header = grid.getHeader();
    
    header.setHtml(grid._buildTpl(grid.getColumns(), true));
    That should update the header but not sure if it will have any issues.
    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.

  2. #122
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    llraj is on a distinguished road

      0  

    Default how to lock/freeze a column ?

    how to lock/freeze a column ?


    Mitchell:

    The grid looks great with horizontal scrolling. Is there a way to lock/freeze a column ? I have to lock the first column(of row labels) so that while scrolling horizontally user knows the row they are on. It is similar to the header row always being visible while scrolling vertically.

    Thanks

  3. #123
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    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


    Working on that on my off time (which isn't much). I had locking working but the scrolling of the nonlocked columns wasn't working in horizontal scrolling so I dumped it to take a fresh look at it.
    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. #124
    Sencha User
    Join Date
    Feb 2012
    Posts
    67
    Vote Rating
    1
    Soenhay is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    I can brainstorm on a better way to be built in but you could execute this:

    Code:
    var header = grid.getHeader();
    
    header.setHtml(grid._buildTpl(grid.getColumns(), true));
    That should update the header but not sure if it will have any issues.
    This works for me with one difference... instead of using grid.getColumns() I put my new columns array. Thanks

    27Apr2012
    Edit: This doesn't seem to work if I add or remove columns.

  5. #125
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    1
    AnujaSonawane is on a distinguished road

      0  

    Default


    I am new to sencha touch 2.0 and after using some custom xtype, i tried using Ext.ux.touch.grid.
    I have a main tabpanel in which there is 2 panels, say entryReportPanel
    Now in this entryReportPanel, i have called the xtype touchgridpanel.
    But this does not display anything but a small part of the toolbar.
    Even if i give a title or any width to the toolbar it does not show up anything.

    Mitchell please help. Is there an issue with the layout.
    Or is there any other way i ahve to use View.js
    I have post the code below.

    Ext.require([
    'Ext.ux.touch.grid.View'
    ]);
    Ext.define('TestModel', {
    extend : 'Ext.data.Model',
    fields : [
    'company',
    'price',
    'change',
    'pct',
    'updated'
    ]
    });
    var store = Ext.create('Ext.data.Store', {
    model : 'TestModel',
    autoLoad : true,
    data:[{company:'abc',price:234,change:'no',pct:'yes',updated:'yes'}]
    });






    Ext.define('Main.view.entryReportPanel', {
    extend: 'Ext.Panel',
    xtype:'entryReportPanel',
    config: {
    layout: 'card',
    },

    initialize: function() {


    this.tabPanel = new Ext.TabPanel({
    type: 'dark',
    dock: 'top',
    animation: 'cube',

    items: [{
    xtype: 'toolbar',
    docked: 'top',
    layout: {
    pack: 'justify',
    },
    defaults: {
    iconMask: true,
    ui: 'plain'
    },
    items: [{
    xtype : 'button',
    iconCls: 'refresh',
    iconAlign: 'right',
    showAnimation: true,
    scope: this,
    handler: function() {
    var tab = this.tabPanel.getActiveItem();
    tab.onRefresh(tab);
    }

    }, {
    xtype: 'segmentedbutton',
    items: [{
    text: 'Natraj Gas',
    cls: 'mainAppTitle',
    handler: function() {
    client.showInfoWindow(); // It will work like a popup window

    }
    }],

    }, {
    xtype : 'button',
    iconCls: 'settings',
    iconAlign: 'left',
    showAnimation: true,
    handler: function() {
    client.showSettingsWindow(); // It will work like a popup window
    }
    }]

    },{
    xtype : 'touchgridpanel',
    title: '24 Hours',
    width:'100%',
    duration: 1,
    store : store,
    colModel : [
    {
    header : 'Company',
    dataIndex : 'company',
    style : 'padding-left: 1em;',
    width : '40%',
    sortable : false,
    filter : { type : 'string' }
    },
    {
    header : 'Price',
    dataIndex : 'price',
    style : 'text-align: center;',
    width : '15%',
    filter : { type : 'numeric' }
    },
    {
    header : 'Change',
    dataIndex : 'change',
    cls : 'centered-cell',
    width : '15%',
    renderer : function(value, values) {
    var color = (value > 0) ? '009933' : 'FF0000';
    return '<span style="color: #' + color + ';">' + value + '</span>';
    }
    },
    {
    header : '% Change',
    dataIndex : 'pct',
    cls : 'centered-cell',
    width : '15%',
    renderer : function(value, values) {
    var color = (value > 0) ? '009933' : 'FF0000';
    return '<span style="color: #' + color + ';">' + value + '</span>';
    }
    },
    {
    header : 'Last Updated',
    dataIndex : 'updated',
    hidden : true,
    style : 'text-align: right; padding-right: 1em;',
    width : '15%'
    }
    ]

    }]

    });
    this.add(this.tabPanel);
    this.callParent(arguments);
    },
    });




    The control is not displayed as in only the toolbar is displayed partially in the top left corner
    can someone please help.
    Please give an example where in the xtype touchgridpanel is called from a tabpanel
    I am not getting this control to work for me

  6. #126
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    1
    AnujaSonawane is on a distinguished road

      0  

    Default


    Hi Michell, tried given by you on page 1 for the carousel
    But i guess i am going wrong with the layouts.
    I have taken the code as it is but it showing up like it is shown in the pic attached.

    Can u please tell me what is wrong?
    The response for this xtype seems to be really great, but as i am not getting it right, i am confused as to what is going wrong.try1.jpg

  7. #127
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default


    Hi Mitchell,

    first of all thank you very much for this component.

    I am having a odd problem. When I define a grid that extends Ext.ux.touch.grid.View, I have to define its height in the config section otherwise the grid will show only its headers an not the data. On the other hand, If I create a Ext.ux.touch.grid.View I do not need to. I am sure that I am missing something but I do not know what.

    Can you (or anybody else) please help?

    Thanks,
    Alex

  8. #128
    Sencha User
    Join Date
    Feb 2012
    Posts
    67
    Vote Rating
    1
    Soenhay is on a distinguished road

      0  

    Default


    Quote Originally Posted by alexgrimaldi View Post
    I am having a odd problem. When I define a grid that extends Ext.ux.touch.grid.View, I have to define its height in the config section otherwise the grid will show only its headers an not the data. On the other hand, If I create a Ext.ux.touch.grid.View I do not need to. I am sure that I am missing something but I do not know what.

    Try setting flex: 2 in the config section.

  9. #129
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    858
    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 AnujaSonawane View Post
    The control is not displayed as in only the toolbar is displayed partially in the top left corner
    can someone please help.
    Please give an example where in the xtype touchgridpanel is called from a tabpanel
    I am not getting this control to work for me
    It looks like your items are children of the toolbar which is docked. I don't think you are meaning to do that.
    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.

  10. #130
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    llraj is on a distinguished road

      0  

    Default cell specific tap handler

    cell specific tap handler


    Mitchell:

    How can I have a tap handler for the grid that has access to the row-column data? i.e. column defined in grid config where tap occurred and the row/record from the store. The tap handler for DataView provides the row I just need the column.

    Thanks

    Lawrence