PDA

View Full Version : add a button with a JSON.....



genius551v
28 May 2007, 9:15 AM
Hi,

I have a problem with this:

1. i want to create a buttons from a JSON, so i have this:


var ob = Ext.decode(Ext.get('json_string').getValue()); //this is OK!
alert('ob:'+ob); // ob:[object Object],[object Object],[object Object] to create 3 buttons

for (var i=0; i<objeto.length; i++){
mytoolbar.add(ob[i]);
mytoolbar.add('-');
}//create succesfull 3 buttons in mytoolbar


to create JSON ob i have this in PHP:
[CODE]
$buttons= array();
$buttons[] = array(
"cls"=>"x-btn-icon mod1",
"id"=>"Modulo1",
"title"=>utf8_encode("Modulo1:Dise

liggett78
28 May 2007, 10:41 AM
Have you tried to remove this in "this.onItemToggle"?

genius551v
28 May 2007, 11:42 AM
Have you tried to remove this in "this.onItemToggle"?

liggett78, dont work.

i have this in my toolbar:


var MyToolbar = function() {
var mytoolbar;
return {
init : function() {
mytoolbar= new Ext.Toolbar('div_tb');
//BUTTONS
var ob = Ext.decode(Ext.get('json_string').getValue()); //this is OK!
alert('ob:'+ob); // ob:[object Object],[object Object],[object Object] to create 3 buttons

for (var i=0; i<objeto.length; i++){
mytoolbar.add(ob[i]);
mytoolbar.add('-');
}//create succesfull 3 buttons in mytoolbar
}, //close init

onItemToggle : function(item, pressed){
if(pressed){
alert('HELLO WORLD!!!');
}
}
};
}();
Ext.onReady(MyToolbar.init, MyToolbar);

liggett78
28 May 2007, 11:50 AM
Oh, I see, try MyToolbar.onItemToggle. Is MyToolbar a global variable?

Otherwise try to take the onItemToggle function out of your singleton.

genius551v
28 May 2007, 12:07 PM
hi,

so i have this:


var MyToolbar = function() {
var mytoolbar;

var onItemToggle = function(){
alert('HELLO WORLD!!!!');
};

return {
init : function() {
....
} //close init
};
}();
Ext.onReady(MyToolbar.init, MyToolbar);

and my JSON in PHP:


....
"toggleHandler"=>"MyToolbar.onItemToggle",
....


and nothing... :((

liggett78
28 May 2007, 12:36 PM
No, now you declared your handler as private, because it's var inside the function.

The problem with your code is that your function name comes as string. So Ext throws an error "Not a function", when it tries to handle the click:

this.toggleHandler.call(...)

toggleHandler is a string and of course it can't be called. What I meant is try to declare toggleHandler as normal function outside MyToolbar, like this:

function onToggleItem(...)
{
alert(...);
}

When you create your buttons, the browser (or its js engine) must be able to find the right function declaration and bind to it, that is the whole point.

I just tried to do it, albeit without json or PHP, just onToggleItem declaration + your button array and other MyToolbar stuff and it did work.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
</head>
<body>

<script type="text/javascript" src="ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">

function onItemToggle(item, pressed){
if(pressed){
alert('HELLO WORLD!!!');
}
}

var json = [{"cls":"x-btn-icon mod1","id":"Modulo1","title":"Modulo1: Dise\u00f1o","url":"index.php?action=CmdDefaultMain_menutree","enableToggle":true,"toggleHandler":onItemToggle,"disabled":false,"toggleGroup":"modulos"},{"cls":"x-btn-icon mod2","id":"Modulo2","title":"Modulo2: Ficha T\u00e9cnica","url":"index.php?action=CmdDefaultMain_menutree","enableToggle":true,"toggleHandler":onItemToggle,"disabled":false,"toggleGroup":"modulos"},{"cls":"x-btn-icon mod3","id":"Modulo3","title":"Modulo3: Pedidos","url":"index.php?action=CmdDefaultMain_menutree","enableToggle":true,"toggleHandler":onItemToggle,"disabled":false,"toggleGroup":"modulos"}];


var MyToolbar = function() {
var mytoolbar;
return {
init : function() {
mytoolbar= new Ext.Toolbar('div_tb');

//var ob = Ext.decode(json); //this is OK!
var ob = json;

for (var i=0; i<ob.length; i++){
mytoolbar.add(ob[i]);
mytoolbar.add('-');
}//create succesfull 3 buttons in mytoolbar
}


};
}();
Ext.onReady(MyToolbar.init, MyToolbar);
</script>
<div id='div_tb'></div>
</body>
</html>

So maybe it might work even if you somehow dynamically retrieve config object for the buttons.

jsakalos
28 May 2007, 5:12 PM
Look with FB what is the type of variable toggleHandler after you've created buttons. I guess it's string and should be function to work. Maybe you can try



btn.toggleHandler = eval(btn.toggleHandler);


but this is just shot in the dark. The problem is that you deliver string in json, not function.

BTW, what's rationale behind creating UI components on server?

Hi,