PDA

View Full Version : Question about button handler and other config options



twosouth
19 Oct 2010, 5:28 AM
Hi All,

I am working with the Ext designer and have stumbled into a particular challenge:

I have added a toolbar of type fbar to the bottom of a form.
Next I added two buttons.
When trying to configure the buttons, many config options seem to be missing. Of particular note is handler and scope.

I can not find these and other properties in the component config section of the designer screen when a button is selected in the designer.

I know that I can code these in manually but it seems like I am missing something.:-?



this.fbar = {
xtype: 'toolbar',
width: 400,
flex: 1,
items: [
{
xtype: 'button',
text: 'Open',
ref: '../openButton'
},
{
xtype: 'button',
text: 'Save',
ref: '../saveButton'
}
]
};


Is there a better way to add buttons and their config options to a form? I borrowed this method from the form samples found here: http://www.sencha.com/forum/showthread.php?96013-Example-Projects

Thanks!
Scott

jarrednicholls
19 Oct 2010, 5:48 AM
Hey Scott,

Any configurations that are meant to be added in your implementation code are omitted in the interface...particularly "function" type options or anything related to event handling. Giving the button an autoRef (to generate the proper ref) and then attaching a click handler to it in your exported .js file is the way to accomplish this.

As you know, there are two files exported for each top-level component: a .ui.js file and an .js file. The former is all of the UI configuration done within the Designer and is not meant to be edited directly as it is overwritten with each project export. The latter is your implementation file, a subclass of the .ui.js file. In there you would do something like:



MyFormPanel = Ext.extend(MyFormPanelUi, {
initComponent: function() {
MyFormPanel.superclass.initComponent.call(this);

this.openButton.on('click', this.openBtnClick, this);
},

openBtnClick: function() {
alert('open button was clicked');
}
});


Hope that helps! There is more learning material on the Designer located at The Learning Center (http://www.sencha.com/learn/Ext_Designer) if you're interested.

twosouth
19 Oct 2010, 6:08 AM
Jarred....thank so much!!

Those docs in the learning center look awesome!! I've been through the getting started doc and have committed myself to getting this fully understood. So the additional docs are going to help a ton.

Also, thanks for the clarifying answer to my question. That helps a TON too!

Scott

mjohnsonaz74
3 Mar 2011, 9:20 AM
I seem to be having trouble with items that don't have a 'ref' attribute. Or, perhaps I'm misunderstanding. I have the following code in my implementation file:


BuildListing = Ext.extend(BuildListingUi, {
initComponent: function() {
BuildListing.superclass.initComponent.call(this);
Ext.get('capNeedsTree').on('click', function(node, event) {
if (node.isLeaf()) {
alert("Node clicked!");
}
});

}
});

and the following tree definition in my UI file:

xtype: 'treepanel',
region: 'west',
autoScroll: true,
width: 200,
rootVisible: false,
root: {
text: 'Build Listing',
expanded: true,
children: [
{
text: 'Main',
expanded: true,
children: [
{
text: 'Capital Needs',
allowChildren: false,
leaf: true,
hrefTarget: 'capNeeds',
id: 'capNeeds'
},
{
text: 'Basics',
allowChildren: false,
leaf: true
}
BuildListing is a container, which has a tree panel as a child component. What I'm trying to do is access the click events on the tree's nodes. I was originally going to assign a click event to each node, but the above code seems more clean as I can test for which node from within the function. The problem I'm having is that
Ext.get('capNeedsTree') is returning null. Am I not defining something correctly? I'm sure this is a very rookie mistake, but I haven't seen a proper way to do this in an implementation file. Is there some 'ref' value that I'm missing? Thank you for your help!

MJ

mjohnsonaz74
3 Mar 2011, 1:17 PM
So, it goes without saying that I'm guilty of asking a dumb question. The autoRef property belongs to the top level treePanel and is not present on the nodes. The original answer with example still holds and works as advertised.

jarrednicholls
4 Mar 2011, 7:10 AM
autoRef will generate the "ref" configuration with the appropriate number of '../' levels so that the reference appears on the top-most component; since that top-level component is the one that gets a .ui.js and .js file generated.

Also, Ext.get() gets DOM node references (in the form of Ext.Element) where you would want to use Ext.getCmp() to get a reference to a component by ID.