PDA

View Full Version : Dynamic buttons in a panel



jackclick
15 Dec 2011, 12:19 PM
I am semi new to ExtJS4 so excuse me if this is a simple question. I have a panel with buttons.



Ext.define('JACK.view.filterPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.filterPanel',
height: '5%',
layout: 'column',
border: false,
width: '100%',
defaults: {
enableToggle: true,
margin: '10 10 10 10'
},
buttonAlign: 'center',
items: [
{ columnWidth: .14, xtype: 'button', id: 'All', text: 'All' },
{ columnWidth: .14, xtype: 'button', id: 'ShowMe', iconCls: 'showme', text: 'Show Me' },
{ columnWidth: .14, xtype: 'button', id: 'Documentation', iconCls: 'documentation', text: 'Documentation'},
{ columnWidth: .14, xtype: 'button', id: 'ApplicationHelp', iconCls: 'application', text: 'Application'},
{ columnWidth: .15, xtype: 'button', id: 'KnowledgeBase', iconCls: 'knowledge', text: 'Knowledge Base'},
{ columnWidth: .15, xtype: 'button', id: 'QuickReference', iconCls: 'quickref', text: 'Quick Reference'},
{ columnWidth: .14, xtype: 'button', id: 'Training', iconCls: 'training', text: 'Training'}
]
});

But I would like to create the buttons dynamically now from like a JSON array created somewhere else. For example, like this php code that returns the array of buttons that I would like to use.



<?php
include_once dirname(__FILE__) . "/includes.inc.php";

$buttons = array("count" => "6", "docTypes" => array());
array_push($buttons["docTypes"], 'All', 'ShowMe', 'Documentation', 'Application', 'KnowledgeBase', 'QuickReference', 'Training');
$encodeButtons = json_encode($buttons);
echo $encodeButtons;
?>

Anyone have an example or some code that would point me in the right direction?

Thanks in advance.

arthurakay
15 Dec 2011, 2:04 PM
If I understand you correctly, you need to do the following:
- get a reference to your toolbar
- remove the existing items in the toolbar
- add the new items (returned via JSON) to the toolbar
- call doLayout() on the toolbar

See the API docs on add()
- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Toolbar-method-add

Does that point you in the right direction?

jackclick
15 Dec 2011, 2:10 PM
Thanks for replying.

Kind of.

I have a render function now that I have been playing with that uses the .add method.



setButtons: function() {
mypanel = Ext.ComponentQuery.query('filterPanel');
mypanel[0].add({xtype: 'button', text: 'button1'});
}

I guess I am looking for how to get the echoed JSON array from the php page inside of setButtons...

arthurakay
15 Dec 2011, 2:14 PM
Assuming that you're building these buttons on initial page load:



<script type="text/javascript">
var buttons = Ext.decode('<?php echo ... ?>'); //output JSON into local variable
</script>


If you were gathering your buttons via some AJAX call, you could use the success callback:


Ext.Ajax.request({
...
success: function(response, options) {
var buttons = Ext.decode(response.responseText);
}
});


That more helpful?

jackclick
15 Dec 2011, 2:18 PM
Ya this should get me to the finish line. Thanks.