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
    544
    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
    544
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi