2

I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.

Is there somehow I can achieve the above?

BrynJ
  • 8,322
  • 14
  • 65
  • 89

2 Answers2

4

You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery

The click events can be applied by using the control function of the controller.

For your basic understanding:

In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.

Some Query examples applicable to the control function

In the following this refers to the controller itself.

You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #

control({'#yourId': {itemclick: this.onItemclick }});

You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes. 

control({'grid': {itemclick: this.onItemclick }});

You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case

control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});

This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery

Also note that every component implements the up() and down() methods which also support ComponentQueries.

I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.

Community
  • 1
  • 1
sra
  • 23,820
  • 7
  • 55
  • 89
  • Thank you for your continued help. My grid is working well added to the items property of the accordion. On the subject of events, might you be able to provide a basic example for a grid item click? I assume I must set some property (my unique id) on a row level and then attach an event handler - which presumably resides in the controller? – BrynJ Nov 12 '12 at 15:50
  • @BrynJ Not at all. You just need a good 'description' of your Target grid. I will edit my post... – sra Nov 12 '12 at 15:53
  • Thanks, this is working fine for me and I can understand the selectors. I can get the event triggered in the controller, however - and perhaps I'm being dense - I don't seem be able to ascertain what row in the grid I have clicked on - the object returned to my function doesn't appear to represent the row? I'm unsure how to set row identifier also - as I'm simply creating an ArrayStore and passing it to the grid panel create (I don't want the identifier to be visible as a row value). I'm almost, there but just this last stumbling block. – BrynJ Nov 12 '12 at 16:54
  • @BrynJ You get the grid as first argument and the record as second argument back. For what do you need the row? You can't do much with it... To modify what is visible from the record and what not simply change the column model. If no one should see the ident field spare the model for it or just set it hidden. To see all available events and all the params you should refer to the API. If this don't help provide some more info what you are tryinto archive with the clicklistener. – sra Nov 12 '12 at 18:04
  • Thanks, I did manage to figure this out. I've been struggling to find the areas I need in the documentation - I guess that's a symptom of the size and complexity of Extjs. The reason I want the id is to load specific content into a tab (held in another child view) - am I going about this the correct way? I must say I've found the learning curve quite steep, going from my php background (where I use CodeIgniter, a rather different MVC implementation). I have jQuery experience, and have also used Appcelerator Titanium which is probably the closest parallel. Sorry for all newbie questions :) – BrynJ Nov 12 '12 at 20:31
0

This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html. Example:

http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html

this one has a grid within it.

Johan Haest
  • 4,391
  • 28
  • 37