[CLOSED] Question on control similar to grid

  1. #1

    [CLOSED] Question on control similar to grid

    Hello

    Can you please point me to the right cotnrol to use for expanadble list below?


    Click image for larger version. 

Name:	CaptureTree.PNG 
Views:	25 
Size:	8.2 KB 
ID:	25397

    I was thinkng about the tree panel - but not sure how to move the arrows to the right hand side ( using css?)

    Thanks for pointing to the right direction
    Last edited by fabricio.murta; Jul 28, 2020 at 7:00 PM.
  2. #2
    Hello @lbrohan!

    You actually have a good point in using the tree panel. But as you noted, the arrows (actually, plus/minus) signs stick to the left.

    But this is all a matter of setting up the HTML template a cell is composed from.

    Here I have just moved the <div /> down to the end of the template and added an inline style (float: right) to stick it to the right wall of the cell box. The change from original is only and only the last two lines of the cellTpl definition (I didn't really need to move it down, but this helps clarity).

    Ext.define('customTreeCellTpl', {
        override: 'Ext.tree.Column',
        cellTpl: [
            '<tpl for="lines">',
            '<div class="{parent.childCls} {parent.elbowCls}-img ',
            '{parent.elbowCls}-<tpl if=".">line<tpl else>empty</tpl>" role="presentation"></div>',
            '</tpl>',
            '<tpl if="checked !== null">',
            '<div role="button" {ariaCellCheckboxAttr}',
            ' class="{childCls} {checkboxCls}<tpl if="checked"> {checkboxCls}-checked</tpl>"></div>',
            '</tpl>',
            '<tpl if="glyph">',
            '<span class="{baseIconCls}" ',
            '<tpl if="glyphFontFamily">',
            'style="font-family:{glyphFontFamily}"',
            '</tpl>',
            '>{glyph}</span>',
            '<tpl else>',
            '<tpl if="icon">',
            '<img src="{blankUrl}"',
            '<tpl else>',
            '<div',
            '</tpl>',
            ' role="presentation" class="{childCls} {baseIconCls} {customIconCls} ',
            '{baseIconCls}-<tpl if="leaf">leaf<tpl else><tpl if="expanded">parent-expanded<tpl else>parent</tpl></tpl> {iconCls}" ',
            '<tpl if="icon">style="background-image:url({icon})"/><tpl else>></div></tpl>',
            '</tpl>',
            '<tpl if="href">',
            '<a href="{href}" role="link" target="{hrefTarget}" class="{textCls} {childCls}">{value}</a>',
            '<tpl else>',
            '<span class="{textCls} {childCls}">{value}</span>',
            '</tpl>',
            '<div style="float: right" class="{childCls} {elbowCls}-img {elbowCls}',
            '<tpl if="isLast">-end</tpl><tpl if="expandable">-plus {expanderCls}</tpl>" role="presentation"></div>'
        ]
    });
    You will want then to fiddle with whatever that {expanderCls} resolves to, as well as the CSS class it is switched to when expanded/collapsed to show the character you want (and even animate it!) as the expand/collapse happens.

    There's not much more delving from here, you'd need to watch what changes by using your browser's DOM explorer (in "F12" developer tools).

    Of course, if you need further help let us know.

    Notice: Ext.NET 4 reached end of production, so the above solution was tested against Ext.NET 5. It is very likely to work with Ext.NET 4 but in case it doesn't, we suggest you to consider upgrading.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    ok, thanks, works pretty well, cellTpl was the key here
    (I needed to introduce column model with single treecolumn column)
  4. #4
    Hello again, @lbrohan!

    As you didn't provide any code sample we went with a generic approach so it was probably not really close to the scenario you faced. Providing test cases in such scenarios, as simple as they may be (the simpler, the better), helps us get to you answers closer to the actual context you are working in.

    Anyway, we're glad the provided solution could be applied in your scenario; just keep that in mind when reporting issues, as the time invested in the test case may prove very fruitful in terms of accurate answers. :)

    We'll mark this thread as closed now.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Question about Button Event Control
    By rosua in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 22, 2012, 6:36 AM
  2. Replies: 4
    Last Post: Jun 25, 2010, 5:19 PM
  3. [CLOSED] [1.0] Custom Control Question
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 12, 2010, 1:53 PM
  4. Question about using Desktop control
    By vali1993 in forum 1.x Help
    Replies: 2
    Last Post: Jan 20, 2010, 4:15 PM
  5. Similar to an updatepanel
    By heysol in forum 1.x Help
    Replies: 0
    Last Post: Oct 27, 2008, 10:10 PM

Posting Permissions