Extjs add grid panel to accordion content

Question

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?

Answer 1

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.

Answer 2

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.