Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    ponie325 is on a distinguished road

      0  

    Default use ext to creat the html,but jquery $(".class") is null

    use ext to creat the html,but jquery $(".class") is null


    I use ext to creat my html in a panel,then I want to control it with jquery

    first I write the code in my <script>,
    Code:
    Ext.onReady(function(){
    varleftNavHtml = '<body><div id="sidebar">';					leftNavHtml += '<div class="trees">'
    						leftNavHtml += '<div class="tree">'
    leftNavHtml += '<div class="name">'
    ...
    then, I use jquery

    Code:
    $("#sidebar .trees .name").toggle(function(){...
    but the console message is $("#sidebar .trees .name") is null

    can anyone help me?

  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default see nodes in DOM tree

    see nodes in DOM tree


    Are you sure you append the markup into body? Are elements there at the time you try to use $ function?

    Could you please give more code samples?

    Regards.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    We would also need to know where you are calling your jQuery code. Is this being called before or after the Ext.onReady function (i.e. has the code been built when jQuery attempts to interrogate it)?

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    ponie325 is on a distinguished road

      0  

    Default


    Thank you for the help.

    Even I use settimeout to do,it still dosen't work. but in my page,the element is there I can see

    In the <head> I put ext3.0 js before jquery 1.8

    Code:
    Ext.onReady(function(){				
    				var leftNavHtml = '<div id="sidebar">'
    					leftNavHtml += '<div class="title">'
    						leftNavHtml += '<div class="m_bg">'
    							leftNavHtml += 'THE TITLE'
    						leftNavHtml += '</div>'
    					leftNavHtml += '</div>'
    					leftNavHtml += '<div class="trees">'
    						leftNavHtml += '<div class="tree no-nodes">'
    							leftNavHtml += '<ul class="nodes"><li class="node"><a href="#">NODE 1</a></li></ul>'
    						leftNavHtml += '</div>'
    						leftNavHtml += '<div class="tree">'
    							leftNavHtml += '<div class="name">'
    								leftNavHtml += 'NODE 1 - 1'
    							leftNavHtml += '</div>'
    							leftNavHtml += '<ul class="nodes">'
    								leftNavHtml += '<li class="node">'
    									leftNavHtml += '<a href="#"  class="current">NODE 1 - 2</a>'
    								leftNavHtml += '</li>'
    								leftNavHtml += '<li class="node">'
    									leftNavHtml += '<a href="#" class="">NODE 1 - 3</a>'
    								leftNavHtml += '</li>'
    							leftNavHtml += '</ul>'
    						leftNavHtml += '</div>'
    					leftNavHtml += '</div>'
    				leftNavHtml += '</div>'
    				
    				var leftNavPanel = new Ext.Panel({
    					region:'center',split:true,
    					style:'border-right:0px;border-left:0px;',
    					bodyStyle:'border-right:0px;border-left:0px;',
    					html:leftNavHtml
    				});
    				
    				leftNavPanel.on("afterrender",function(){
    					setTimeout(doChange,1000);
    				})
    
    
    				
    				function doChange(){
    					$(function(){
    						$("#sidebar .trees .name").each(function(){
    							$(this).toggle(function(){
    									$(this).next(".nodes").slideDown().parent().addClass("tree-expand");;
    								},function(){
    									$(this).next(".nodes").slideUp().parent().removeClass("tree-expand");;
    								}
    							)
    						})
    						$("#sidebar .trees .nodes a").each(function(){
    							$(this).click(function(){
    								$("#sidebar .trees .nodes a.current").removeClass("current");
    								$(this).addClass("current");
    							})
    						})
    					})
    				}

  5. #5
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Your "on afterrender" event isn't being called.

    I adapted your leftNavPanel to have its own listener and it then manages to call the doChange function successfully.

    Some very simple alert() or console.log() debugging easily pointed out that the afterrender event wasn't being called as you can see in this example:
    http://jsfiddle.net/Whinters/RF4zP/

Thread Participants: 2

Tags for this Thread