PDA

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



ponie325
13 Nov 2012, 2:32 AM
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>,

Ext.onReady(function(){
var leftNavHtml = '<body><div id="sidebar">'; leftNavHtml += '<div class="trees">'
leftNavHtml += '<div class="tree">'
leftNavHtml += '<div class="name">'
...

then, I use jquery


$("#sidebar .trees .name").toggle(function(){...

but the console message is $("#sidebar .trees .name") is null

can anyone help me?

sword-it
13 Nov 2012, 3:58 AM
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.

willigogs
13 Nov 2012, 4:15 AM
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)?

ponie325
13 Nov 2012, 9:32 PM
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


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");
})
})
})
}

willigogs
14 Nov 2012, 1:44 AM
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/