Page 7 of 7 FirstFirst ... 567
Results 61 to 67 of 67

Thread: TouchTreeGrid component

  1. #61
    Sencha Premium Member
    Join Date
    Feb 2016
    Posts
    32
    Vote Rating
    0
      0  

    Default

    How can I change the column header text from a column from Touchtreegrid using a command?

    I'm using Touch 2.4.x

  2. #62
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    59
    Vote Rating
    6
      0  

    Default

    Hi,

    Using sample code TouchTreeGrid.view.Dow2012Basic2Cont.js as an example:

    Add itemId to the column you want to update.

    {
    header: 'CloseDate',
    itemId: 'myColumn',
    dataIndex: 'CloseDate',
    width: '4.5rem',
    style: 'text-align: center; font-weight: bold; color: #008abc;',
    headerStyle: 'text-align: center; color: #ccc;',
    renderer: 'Ext.Date.format(values.CloseDate, "n/j/Y")',
    sortable: true
    },

    You can process some event in TouchTreeGrid.controller.ListsController.js:

    var dow2012Basic2Cont = this.getDow2012Basic2Cont();

    var myColumn = dow2012Basic2Cont.down('#myColumn').

    myColumn.header = 'My new text';

    // To repaint the header...
    var dow2012 = dow2012Basic2Cont.down("#dow2012");
    dow2012.doRefreshList();

    Regards,
    Steve

  3. #63
    Sencha Premium Member
    Join Date
    Feb 2016
    Posts
    32
    Vote Rating
    0
      0  

    Default

    Thanks

  4. #64
    Sencha User
    Join Date
    Apr 2016
    Posts
    1
    Vote Rating
    0
      0  

    Default update header

    Hi
    i try example 2 and its great, now i want to change the header in js How to do this?

    Ext.define('app.view.Example2Bcontainer', {

    extend: 'Ext.Container',
    alias: 'widget.example2Bcontainer',


    requires: [
    'Ext.Container'
    ],


    config: {
    // itemId: 'example2Bcontainer',
    layout: 'card',

    items: [
    {
    xtype: 'touchtreegrid',
    store: Ext.create('app.store.ProjectsStore', { fullscreen: true }),
    onItemDisclosure: true,
    columns: [
    {


    header: 'Agent',
    dataIndex: 'category',

    width: '50%',
    style: 'text-align: left;font-size:10px',
    categStyle: 'font-weight: bold; text-align: left; color: #f4f4f4;font-size:12px',
    headerStyle: 'text-align: left; color: white;'
    },
    {
    header: master.touchtreegridarrheader1,
    dataIndex: 'value',
    width: '20%',
    style: 'text-align: center; padding-left: .5em;font-size:10px',
    categStyle: 'text-align: center;padding-left: .5em;font-size:12px',
    headerStyle: 'text-align: center; color: white;padding-left: .5em;'
    },
    {
    header: master.touchtreegridarrheader2,
    dataIndex: 'value1',
    width: '20%',
    style: 'text-align: center;font-size:10px',
    categStyle: 'text-align: center;font-size:12px',
    headerStyle: 'text-align: center; color: white'
    }/* ,{
    header: 'Done?',
    dataIndex: 'done',
    width: '15%',
    style: 'text-align: right; font-size: .6em;',
    categStyle: 'text-align: right;font-size: .6em;',
    headerStyle: 'text-align: right; color: #ccc;'
    }*/
    ],
    variableHeights: false,
    itemHeight: 32,
    listItemId: 'example2Blist',
    includeFooter: true,
    includeFooterLevels: true,
    categDepthColors: true,
    categDepthColorsArr: [
    '#808127',
    '#949569',
    '#C5C678'
    ],
    categDepthColorButtons: true,
    includeHeader: true,
    applyDefaultCollapseLevel: false,
    helpHtml: './resources/html/Project2Example.html',
    categCssArr: [
    'touchtreegrid-list-categ0',
    'touchtreegrid-list-categ',
    'touchtreegrid-list-categ'
    ],
    cls: [
    'x-touchtreegrid-list',
    'x-touchtreegrid-list-example2',
    'x-touchtreegrid-list-example2B'
    ],
    // itemId: 'example2B'
    }
    ]
    }



    });


    chart = new Ext.create('app.view.Example2Bcontainer', {});





    i want to change dynamic header Agent to Customer

    Regards
    Chen

  5. #65
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    59
    Vote Rating
    6
      0  

    Default

    I added following to my previous reply regarding how to update the header:

    // To repaint the header...
    var dow2012 = dow2012Basic2Cont.down("#dow2012");
    dow2012.doRefreshList();

    If you take a look at the TouchTreeGrid.js doRefreshList() method you will see how the HTML for the header is constructed and then updated. Note this method refreshes the entire grid. You can just call this method or create a custom method that just refreshes the header.

    Regards,
    Steve

  6. #66
    Sencha User
    Join Date
    Nov 2014
    Posts
    44
    Vote Rating
    0
      0  

    Default

    Is there any update regarding the calendar list view?

  7. #67
    Sencha User
    Join Date
    Nov 2014
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Hi Steve,
    I'd like to ask you for a method to get neighboring cells. Let me explain better:
    When a cell is tapped, I highlight it adding a custom class .touchtreegrid-simplelist-cell-activeto it. Then I have arrow buttons (up/down/left/right) to navigate between cells.
    When I tap a button, I would love to know how you would unmark (remove the active class) the current selected cell, and highlight the adjacent one. My main problem is that I don't know how to access the DOM element of the adjacent cell.
    Thank you

Page 7 of 7 FirstFirst ... 567

Tags for this Thread

Posting Permissions

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