Extjs add grid panel to accordion content

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?


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.

<strong>For your basic understanding:</strong>

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.

<strong>Some Query examples applicable to the control function</strong>

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. <strong>I recommend this one in your case</strong>

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 <strong>up()</strong> and <strong>down()</strong> methods which also support ComponentQueries.

<strong>I forgot to mention:</strong> 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.


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:


this one has a grid within it.


  • Login facebook right in app with Embedded WebView Login Dialog
  • Main method is not called in Scala script
  • how to override Extjs Timefield to show custom max value
  • how to track in gridview whether filter is applied or not in extjs?
  • ExtJs 4, what is the right way to Delete control from container and Remove it from the memory?
  • Lua string.gsub() by '%s' or '\\n' pattern
  • Firebase, only get new children
  • In java, how do you retrieve images from a jar file?
  • Access Google Maps from outside
  • NHibernate proxyexception
  • Pointer vs Reference difference when passing Eigen objects as arguments
  • Get UILabel out of UIButton
  • c++ search a vector for element first seen position
  • Opaque reference instead of PImpl. Is it possible?
  • Why isn't my “Fizz Buzz” test in R working?
  • Python PIL to extract number from image
  • c++ regex_replace not doing intended substitution
  • CodeIgniter URI Parameter is partially bypassing an “if” statement
  • How do I remove all but some records based on a threshold?
  • using System.Speech.Synthesis with Windows10 universal app (XAML-C#)
  • opencv display image without x server
  • GAE: Way to get reference to an HttpSession from its ID?
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • What is the purpose of TaskExecutor in spring?
  • Admob requires api-13 or later can I not deploy on old API-8 phones?
  • Sencha Touch 2.0 Controller refs attribute not working?
  • Bug in WPF DataGrid
  • jQuery tmpl and DataLink beta
  • How can I estimate amount of memory left with calling System.gc()?
  • bootstrap to use multiple ng-app
  • Cannot Parse HTML Data Using Android / JSOUP
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Getting Messege Twice Using IMvxMessenger
  • apache spark aggregate function using min value
  • Running Map reduces the dimensions of the matrices
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?