1. #1
    Ext User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    Aur is on a distinguished road

      0  

    Default TreeNode, href and ajax

    TreeNode, href and ajax


    Hello.

    I'm using a TreePanel, AsyncRootNode and a json tree loader. All my node have a href attribute, so the user can see a correct url for the mouse over.

    I want to open this URL via an Ajax request, so I'm using a listener with a click event with an prototype.js ajax request (to update a div node).

    The event is fired, but the browser handle the <a tag created from the href parameter.

    I've found a (bad) solution: use something else than href, but doing so I dont have nice url on mouse over.

    Is there a way do to so?

    Thanks for your answers.

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Use:

    Code:
    listeners: {
      click: {
        fn: functio() {
          ...
        },
        stopEvent: true
      }
    }
    or call e.stopEvent().

  3. #3
    Ext User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    Aur is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Use:

    Code:
    listeners: {
      click: {
        fn: functio() {
          ...
        },
        stopEvent: true
      }
    }
    or call e.stopEvent().

    Thanks for the quick answer.

    It's not working, I still have a full reload of the page through the followed link in the <a tag . I assume the <a tag is not handle by Ext event but rather directly from the browser.

    Here is my listeners code from the new TreePanel():
    Code:
            listeners:{
                    click: {
                            fn: function(node, e){
                                    href = node.attributes["href"];
                                    if (href != undefined) {
                                            new Ajax.Updater('center', href, {asynchronous:true, evalScripts:true, method:'get'});
                                    }
                            },
                            stopEvent: true
                    }
           }
    and a sample json node:

    Code:
    {
            "text": "Ferronier (0)",
            "id": "p-5-v-7",
            "href": "/professions/5.html",
           "leaf":false,
            "iconCls": "file",
            "children" : [                ]    },

  4. #4
    Ext User
    Join Date
    Aug 2008
    Posts
    3
    Vote Rating
    0
    Aur is on a distinguished road

      0  

    Default


    Ok, my bad.

    Putting a e.stopEvent() juste after the Ajax call make it.

    Thank you very much.

  5. #5
    Sencha User
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    chirayubhatt is on a distinguished road

      0  

    Default I have tree node and on click of tree node i want an ajax call to update view port

    I have tree node and on click of tree node i want an ajax call to update view port


    I have a similar problem with response of href.
    i want to open in the same viewPort (contentPanel).

    Here is my code structure:
    // Go ahead and create the TreePanel now so that we can use it below
    var treePanel = new Ext.tree.TreePanel({
    id: 'tree-panel',
    title: 'Administration Menu',
    region:'north',
    split: true,
    height: 300,
    minSize: 150,
    autoScroll: true,

    // tree-specific configs:
    rootVisible: false,
    lines: false,
    singleExpand: true,
    useArrows: true,

    loader: new Ext.tree.TreeLoader({
    //dataUrl:'tree-data.json'
    dataUrl:'tree_data/'
    }),
    listeners:{
    click: {
    fn: function(node, e){
    href = node.attributes["href"];
    if (href != undefined) {
    new Ajax.Updater('center', href, {asynchronous:true, evalScripts:true, method:'get'});
    e.stopEvent();
    }
    },
    stopEvent: true
    }
    },
    root: new Ext.tree.AsyncTreeNode()
    });


    Here is the json block;

    expanded: true,
    children:[{
    text:'Manage Property Request',
    id:'absolute',
    leaf:true,
    href:'chirayu'

    }

    Any help will be appriciated

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    OK, but what exactly is the question?

  7. #7
    Sencha User
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    chirayubhatt is on a distinguished road

      0  

    Default Here is my query

    Here is my query


    I want to update the content panel on click of any node through Ajax,
    So if I click on the tree node, relevent url should be called from the same application and content area should be updated.
    I have use the example of the browser-layout.js in example folder of extjs 3.3.1.

    any other way will work for me not stick to this browser-layout.js but should be within extjs

    content_panel_update.jpg

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No idea why you are using Ajax.Updater. Ext can load HTML content into a panel without needing additional classes.

  9. #9
    Sencha User
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    chirayubhatt is on a distinguished road

      0  

    Default


    I am new to the extjs and saw the example folder and thaught this can help me.

    can you suggest any exmple how can i implement ExtJs in my application with the above requirement?
    OnClick of each tree node, it should fire the ajax request and response should be updated with the content panel.
    this response is generated dynamically as per the params passed in ajax request. the response can be datagrid, panel, or static html...

Thread Participants: 2