12823

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?

Answer1:

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.

Answer2:

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.

Recommend

  • 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?