PDA

View Full Version : Creation of Button dynamically



Soumyajm
20 Jun 2012, 8:59 PM
Hi,
I want to create button dynamically as per Json in Ext js 4.1 . How i can do ? From Json i will get only the name of the button . Please help me out in this one . Thanks..

sword-it
20 Jun 2012, 9:48 PM
HI!

i guess you have a form or a container and on the basis of ajax response, you want to render a button in it.

for example:-




//ajax response
, success: function (data) {
var data = Ext.util.JSON.decode(data.responseText);
if(data.buttonText){
yourScope.addButtonDynamically(data.buttontext)
}
}






function addButtonDynamically(buttontext){
if (buttonText){
yourPanel.add(yourScope.createButton(buttonText));
yourPanel.doLayout();
}
}

function createButton(buttontext){
return[
{
xtype:'button',
text:buttontext,
width:95
}
]
}

Soumyajm
20 Jun 2012, 10:59 PM
In Json i will get data in this format -- {buttons:[{text:'Button1'},{text:'Button2'}]}. From this i need to create buttons in my panel . Sometimes i can get 2 buttons and sometimes 3 buttons . In this case i need to create 2 buttons with name Button1 and Button2.

Soumyajm
20 Jun 2012, 11:17 PM
Thanks a lot . Its working . But my buttons are coming one below the other vertically . I want it in Horizantaly..



Ext.onReady(function () {
//var weeksData = eval('(' + document.getElementById('buttonjson').innerHTML + ')');
var
jsonData = {buttons:[{text:'Button1'},{text:'Button2'}]};
var button=new Ext.Panel({

width:214,
height:30,

// items : weeksData,
buttons: jsonData.buttons,
enableToggle:true,

renderTo: Ext.getBody()
});
});

Please guide me on this .

Ex_Soft
20 Jun 2012, 11:47 PM
But my buttons are coming one below the other vertically . I want it in Horizantaly..


<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test Buttons</title>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css"/>
<script type="text/javascript" charset="utf-8" src="http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all.js"></script>
<script>
Ext.onReady(function(){
var
jsonData = { buttons: [ {text: "Button# 1"}, {text: "Button# 2"} ]};

Ext.create("Ext.panel.Panel", {
buttons: jsonData.buttons,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>

Soumyajm
21 Jun 2012, 12:48 AM
This is my code only .

Soumyajm
21 Jun 2012, 1:14 AM
Hi,I am brining the buttons dynamically from JSOn . Its working fine . Now i want to set the properties for the buttons . like for each button i need to set the property enableToggle=true. How i can do this ? Please guide me on this at the earliest . Thanks
Here is my code

Ext.onReady(function () {
var jsonData = eval('(' + document.getElementById('buttonjson').innerHTML + ')');


Ext.create('Ext.Panel', {
title: 'Trend Period',
width:320,
height:50,
frame:false,
collapsible:true,
buttons: jsonData.Trendbuttons,
renderTo: Ext.getBody()
});

Ex_Soft
21 Jun 2012, 1:17 AM
This is my code only .
Buttons are horizontally in this code (http://jsfiddle.net/QEsy2/)

Soumyajm
21 Jun 2012, 1:20 AM
yes . Buttons are coming horizontally . thats not an issue . Now i want to set the properties for the buttons . like for each button i need to set the property enableToggle=true. How i can do this ? Please guide me on this at the earliest . Thanks
Here is my code

Ext.onReady(function () {
var jsonData = {Trendbuttons:[{text:'Week'},{text:'Month'},{text:'Quarter'}]};


Ext.create('Ext.Panel', {
title: 'Trend Period',
width:320,
height:50,
frame:false,
collapsible:true,
buttons: jsonData.Trendbuttons,
renderTo: Ext.getBody()
});

Ex_Soft
21 Jun 2012, 1:27 AM
var
jsonData = {Trendbuttons:[{text:'Week'},{text:'Month'},{text:'Quarter'}]};

for(var i=0, len=jsonData.Trendbuttons.length; i<len; ++i)
jsonData.Trendbuttons[i].enableToggle=true;

or Ext.Array.each() (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.Array-method-each)

sword-it
21 Jun 2012, 1:27 AM
Hi!

if you need to provide configs for your buttons, you may create them by following:-




//ajax response
, success: function (data) {
var data = Ext.util.JSON.decode(data.responseText);
if(data.buttons){
addButtonDynamically(data.buttons)
}
}


function addButtonDynamically(buttons){
if (buttons){
yourPanel.add(createButton(buttons));
yourPanel.doLayout();
}
}


function createButton(buttons){
var totalButtons=buttons.length
,dynamicButtons=[];
for(var i=0;i<totalButtons;i++){
dynamicButtons.push({
xtype:'button',
text:buttons[i].text,
enableToggle:true,
width:95
});
}
return dynamicButtons;
}

Soumyajm
21 Jun 2012, 2:15 AM
Thanks a lot . Its working fine . I am facing one small issue . My buttons are getting populate from right side . It should be from left side . This is my code . And space is there between 2 buttons which is not required.

Code :

Ext.onReady(function () {
var jsonData = {Trendbuttons:[{text:'Week'},{text:'Month'},{text:'Quarter'}]};
var len= jsonData.Trendbuttons.length;
for(var i=0; i<len; ++i)
{
jsonData.Trendbuttons[i].enableToggle=true;
jsonData.Trendbuttons[i].iconAlign='left';
jsonData.Trendbuttons[i].autoWidth=true;
jsonData.Trendbuttons[i].toggleGroup='trendtogglegroup';
}

Ext.create('Ext.Panel', {
title: 'Trend Period',
width:320,
height:50,
bodyStyle : 'padding: 10px; background-color:#d8e3fa',
iconAlign: 'left',
frame:false,
collapsible:true,
buttons: jsonData.Trendbuttons,
renderTo: Ext.getBody()
});36424

});

Here is the output image attached .

Ex_Soft
21 Jun 2012, 3:37 AM
It should be from left side
buttons (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.panel.Panel-cfg-buttons)


Ext.onReady(function(){
var
jsonData = { buttons: [ {text: "Button# 1"}, {text: "Button# 2"} ]};

Ext.create("Ext.panel.Panel", {
//buttons: jsonData.buttons,
// equ
dockedItems: [{
xtype: "toolbar",
dock: "bottom",
ui: "footer",
items: jsonData.buttons
}],
renderTo: Ext.getBody()
});
});

Soumyajm
21 Jun 2012, 4:08 AM
Thanks a lot , But still issue is there i.e space between 2 buttons .
36428