how to do a complex query in the refs property of a controller?

[sandeep45]

Lets say I have a panel with a few buttons defined like this:

Ext.define('Desk.view.Case', {
	extend: 'Ext.Panel',
        xtype: 'casesPanel'
        config: {
		items:[
			{
				xtype:'button',
				text:'i am a button'
                        },
			{
				xtype:'button',
				text:'i am a button'
                        },


			{
				xtype:'button',
				text:'i am a button'
                        }
       }
});

Now in my controller i want to have a ref to the second button. How would i do that? This is what I thought would work, but it doesn't?

Ext.define("Desk.controller.CaseCarousel", {
	extend: "Ext.app.Controller",
	config: {
		refs: {
		       casesPanel: 'casesPanel',	
                       button2: 'casesPanel button[1]'
                },
                control: {
                        button2: {
                                   tap: 'bla'
                        }
                }
        }
});

To get around this issue, I have been doing the look up in the "launch" function of the controller. I am not sure if this is the correct/recommended way and thus am making this post.

       launch: function(){
		var secButton = this.getCasesPanel().query("button")[1];
		secButton.on("tap", bla, this);
	}

Thanks

[jerome76]

Why don't you reference the buttons by their itemId?

[sandeep45]

Usings ids is not cool coz if i make instances of this panel then all instances will have the same id

i could use like a name or some other attribute, but this is an example. i am interested in learning how others r doing complex queries to find components like one does in DomQuery.

Why don't you reference the buttons by their itemId?

[jerome76]

You could dynamically create itemId's for the buttons when creating instances of the panel, but the way you I understand what you mean.

I know there are many ways to use Ext.ComponentQuery.query().

You could try using:

// retrieve all direct children which are Ext.Panels within myCt
var directChildPanel =Ext.ComponentQuery.query('#myCt > panel');

And rewriting it to be something like:

//maybe this works where it retrieves all direct children which are Ext.Buttons within Desk.view.Case and then [1] to pick out the second button
var button2 = Ext.ComponentQuery.query('casesPanel > button')[1];

[sandeep45]

This doesn't work when specified in refs property.

You could dynamically create itemId's for the buttons when creating instances of the panel, but the way you I understand what you mean.

I know there are many ways to use Ext.ComponentQuery.query().

You could try using:

// retrieve all direct children which are Ext.Panels within myCt
var directChildPanel =Ext.ComponentQuery.query('#myCt > panel');

And rewriting it to be something like:

//maybe this works where it retrieves all direct children which are Ext.Buttons within Desk.view.Case and then [1] to pick out the second button
var button2 = Ext.ComponentQuery.query('casesPanel > button')[1];

[jerome76]

I'm sorry, I don't use Ext.Controllers so I couldn't have known. Maybe someone else has another idea. I suggest to continue playing around with that example for now until then.

[liaoyiwu]

give the button an 'action' property, then use refs to locate it

items: [{
      xtype: 'button',
      text: 'button1',
      action: 'doButton1Action'
},{
      xtype: 'button',
      text: 'button2',
      action: 'doButton2Action'
},...]

refs: {
     button2:  '
casesPanel button[action=
doButton2Action]'
},
control: {
 button2: {
    tap: 'doTapButton2'
 }
}