1. #1
    Sencha User
    Join Date
    Jan 2009
    Location
    Ottawa, ON, Canada
    Posts
    81
    Answers
    6
    Vote Rating
    1
    myExtJsUname is on a distinguished road

      0  

    Default Unanswered: How to add an Ext.slider.Single to a TreeNode

    Unanswered: How to add an Ext.slider.Single to a TreeNode


    Hello all,

    I'm hoping someone can comment on an approach I can utilize to add an Ext.slider.Single to a TreeNode's label. After reading and trying a few things, I'm not even sure how to go about it.

    Given the following contents of an Ext.tree.Panel, I would like to display an Ext.slider.Single with each of the service nodes where you see the "|-----------|".
    Code:
    - Some Service  |-----------|
        - layer 1
        - layer 2
    - Another Service  |-----------|
        - layer 3
    I was originally thinking I could add something like '<div id="slider_*"></div>' to the text for the node and after rendering the tree, create the slider and renderTo each unique slider_* id. When I tried that though, I can get the slider to appear initially, but it's not actually next to the label and it disappears completely whenever the TreeNode is redrawn (like during expand/collapse). Then, it reverts back to just the '<div id="slider"></div>' string because that's what's in the raw name. So, then I thought perhaps after rendering the slider, I could get the HTML for it and update the raw name with this information.

    However, just with what I have managed to figure out so far, this seems like a band-aidy (is that a word?) approach to me. So, I thought I'd ask if anyone has any suggestions for a different and likely more correct one. I have no problem doing the research and leg-work...I'm just not really sure what an appropriate approach to this type of thing might be.

    Any suggestions are appreciated. Even a reference to somewhere where someone is adding some other ExtJs component to a TreeNode might give me some ideas but, alas, I haven't come across one so far.

    Cheers,
    jtm

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,073
    Answers
    3500
    Vote Rating
    853
    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


    The node is just html so you would have to use renderTo on the slider.
    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.

  3. #3
    Sencha User
    Join Date
    Jan 2009
    Location
    Ottawa, ON, Canada
    Posts
    81
    Answers
    6
    Vote Rating
    1
    myExtJsUname is on a distinguished road

      0  

    Default


    The node is just html so you would have to use renderTo...
    I'm afraid I am no further along in figuring out how to implement this work although I do appreciate your taking the time to respond, Mitchell. As I am still trying, I decided to try what I thought would be an easier component to add and am submitting it as an example for my questions. Hopefully, someone out there can help me work my way through this so I can understand the correct way to go about implementing it in ExtJs.

    For this example, I'm just trying to add an image to one particular type of node which will ultimately call a "remove" handler when the user clicks on that image. The scenario I'm trying to implement has the following requirements:

    1. Only a Service can be removed, Layers cannot. This means only some nodes will have this "Remove" image, so it's insertion at runtime is dynamic; and,
    2. Although my example hardwires the tree's contents before displaying the panel, in my application, it is also possible that the tree panel will already be displayed when a new Service (and its tree hierarchy) is added to it. I already have the code that does the appending/inserting of TreeStores into an existing panel.Tree. The reason I particularly mention this requirement though is because I can't figure out at what point in the process to create the Ext component when there is something to "renderTo" as suggested in the response above. But, I'm getting ahead of myself...
    3. As suggested by the above requirement, I really have no idea how many "Services" will exist in the tree.

    So, to start with the basics as regards the suggestion to "use renderTo". I have tried adding a unique <div> to each "Service" node's text in my tree and then creating an Ext.img that gets rendered to it. This "works" but exhibits the problems I mentioned in my original post. First, the image is placed below the node in question (rather than at the end of the node's text) and if you expand/collapse the node, the image is gone because the content has been refreshed with what's in its "raw" values where only the <div> is provided; the image isn't re-rendered.

    Code:
    <html>
      <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="/EMAF/ext-4.1.1/resources/css/ext-all.css">
        <script type="text/javascript" src="/EMAF/ext-4.1.1/ext-all-debug.js"></script>
        <title>Tree</title>
    <script type="text/javascript">
    
    Ext.application(
        {
            name: "myTree"
            ,launch: function(){
                Ext.create(
                    "Ext.button.Button"
                    ,{
                        renderTo: 'btn'
                        ,text: "Open Tree Window"
                        ,handler: openWindow
                    }
                );
            }
        }
    );
    
    function openWindow(){
        var treeStore = Ext.create(
            "Ext.data.TreeStore"
            ,{
                root: {
                    text: "HiddenRoot"
                    ,children: [
                        {
                            text: 'Service 1 <div id="img1"></div>'
                            ,service: new Object({url: "http://Service1"})
                            ,children: [
                                {
                                    text: "Layer 1"
                                    ,leaf: true
                                }
                                ,{
                                    text: "Layer 2"
                                    ,leaf: true
                                }
                            ]
                        }
                    ]
                }
            }
        );
    
        var pnlTree = Ext.create(
            "Ext.tree.Panel"
            ,{
                store: treeStore
                ,rootVisible: false
                ,hideHeaders: true
            }
        );
    
        var myWin = Ext.create(
            'Ext.window.Window'
            ,{
                title: 'Layer Picker'
                ,width: 300
                ,height: 300
                ,layout: "fit"
                ,items:[
                    pnlTree
                ]
            }
        );
        myWin.show();
    
        Ext.create(
            'Ext.Img'
            ,{
                src: 'http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/esri/dijit/images/close.gif'
                ,renderTo:"img1"
            }
        );
    }
    </script>
    
      </head>
      <body>
        <div id="btn"></div>
      </body>
    </html>
    I am certain this method of implementation can't be what was meant by the suggestion, but I'm afraid I don't know how else to interpret it. Can anyone provide any additional insight?

    Cheers,
    jtm

Thread Participants: 1