Does it work with ST 2.4.2?

[jllodra]

I am having a few exceptions in the console, like:

• item.getHeader is not a function
• node.isLeaf is not a function

Thank you for your job.

[jllodra]

Just tried the TTG_LockedColumns example with 2.4.2 and it's working, so the problem should be elsewhere in the code and not in TTG.

I guess no, but is it possible to attach a tap listener to a Cell (not a row)?

[swluken]

Hi, I confirmed the Kitchen Sink example works with 2.4.2.

The following examples from Kitchen Sink demonstrate cell tap listener functionality:

• Basic List #2 example (Dow2012Basic2Cont.js ... checkbox "flag" column)
• Horizontal Scrolling example (Dow2012HorizCont.js ... "close date" and "close price" columns)

All of these utilize the "addDataIndexToDiv" config which add the dataIndex reference to the actual div as an attribute. itemTap listener is then used and the tapped "dataIndex" extracted from e.target to process the cell tap. Refer to onDynamicGridLeafItemTap() method within ListsController.js

Also refer to pages 41 and 51 in "TouchTreeGrid - Documentation.pdf" for further discussion.

If you are still struggling to get your example working you can send the code to swluken@aol.com and I can take a look.

Regards, Steve

[jllodra]

Got it working (locked+tap), this is nice, thank you for anwsering Steve!

One last issue, I use a simpleList and I would like to add a docked row as footer (just a regular row in the last position and docked to bottom, with the scrolls synched and always-on-top).

What would it be the correct approach? Thanks again.

[swluken]

Assuming I understand your question correctly, I'm pretty sure this will work to dock a custom container to your grid but didn't test:

Handle "initialize" event for "yourGrid" in a Controller:

onYourGridInitialize(yourGrid, eOpts){ var yourGridList = yourGrid.down('#touchtreegridlist');

var somePanel = {
    xtype: 'container',
    height: '??px',
    etc...
}

// If you want to dock somePanel into yourGrid so that it is always visible:
somePanel.docked = 'top' // or 'bottom'
yourGrid.add(somePanel);

// If you want to dock somePanel to the top or bottom of  yourGrid so that is scrolls with the list
somePanel.scrollDock = 'top' // or 'bottom'
yourGridList.add(somePanel);

// Note:  I use scrollDock config to dock legend in "Option Dates" example of http://www.gomainerentals.com/Sencha/CalendarPicker/app.html?deviceType=Phone

}

For locked grids you would need to do this for the the locked and normal grid instances.

Regards, Steve

[jllodra]

Sure, your idea works, thank you so much. :+1:

The last thing I want to add is an Ext.Button() inside one header cell.

I think it is only possible to add plain html to a header content, not a ST component.

The approach I took was to use an empty div as a placeholder inside a header cell, and from the "initialize" function in the controller I created an Ext.Button and make it renderTo() inside that placeholder. The problem is that the dom is not always ready in that "initialize" function, so Ext.select or any other way to grab the placeholder directly from the dom is not working... so I have to use a setTimeout sigh.

Can you enlighten me again? Thanks in advance.

[swluken]

Maybe there is a way to add a ST component inside the header, but I haven't tried it before. You could however do something as shown in "Horizontal Scrolling" example of http://www.gomainerentals.com/Sencha/TTG_Example1/index.html.

"Button" was added using HTML with a listener. I created the button by updating header config for that column:

header: 'Volume
Button',

My css:

.mybtn{ background: red; color: white; border: 2px solid white; border-radius: 10px; padding: 0 5px; }

I added a method to my controller listening on 'refresh' event for the list component created by TouchTreeGrid (default listItemId= 'touchtreegridlist' ... but you should make this unique)

onListRefresh: function(dataview, eOpts) {
    var me = this,
        header = dataview.parent.down('#touchtreegridheader'),
        headerEl  = header.element,
        btnEl = Ext.get(headerEl.down('span[class="mybtn"]'));

    if (btnEl){
        btnEl.on('tap', me["handleBtnTap"], me, {});
    }

},

handleBtnTap: function() {
    Ext.Msg.alert('You tapped Button');
}

One thing to be aware of is that header is redrawn after each column sort by TouchTreeGrid. Listening to the 'refresh' event recreates the listener on the newly created dom element after each sort.

Regards, Steve