ExtJS Grid toolbar - extjs

My ExtJS grid is attached with action tbar, now in the handler of the toolbar buttons I need to have the grid instance. One way I can do it using
this.findByParentByType("grid"). Is there any better way that I can get the grid instance??

You can also use the ownerCt var to access the parent element. Based on the nesting level you will minimal need ownerCt.ownerCt from the button instance to access the grid. FindParentByType does basicly the same and checks each type. Firebug and console.log will help you with further debuging. EDIT:I forgot the Ext.getCmp that can be used to find an object by it's id.

You can also get parent grid by giving scope scope:this to toolbar button, then in handler you will get grid instance in 'this' variable.

Related

Extjs ownerCt undefined

I created a new component in my grid's listeners: beforeload, and when i called .show() on it, the debugger showed that d.ownerCt is undefined. Any suggestions?
ownerCt is set automatically by the framework as soon as a component is added to a container. It seems that you're calling show() manually indicating that your component is not part of a container hierarchy.
See ownerCt in the Ext JS documentation (here Ext JS 6 classic, but that concept hasn't changed).
This Component's owner Container (is set automatically when this
Component is added to a Container).
Important. This is not a universal upwards navigation pointer. It
indicates the Container which owns and manages this Component if any.
There are other similar relationships such as the button which
activates a menu, or the menu item which activated a submenu, or the
column header which activated the column menu.
These differences are abstracted away by the up method.
Note: to access items within the Container see itemId.

Xtragrid: Apply custom filter without rebinding the datasource

I am using Xtragrid control and BindingList as data source, and CustomRowFilter event of gridView control. It works fine when I call BindingList.ResetBindings, but it resets the current selection.
Is there a way to force new filter (through CustomRowFilter event handler) without calling BindingList.ResetBindings?
Use the RefreshDataSource method to update data displayed within the grid control's View as:
//Refresh the grid control
gridControl1.RefreshDataSource();
I suggest you to go through the below reference links:
Refreshing the GridControl
GridControl.RefreshDataSource
I found solution myself:
xtraGrid.RefreshDataSource()

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.
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.
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.

How to access toolbar object of nestedlist view from another view's callback in sencha touch?

I am new in Sencha Touch, so I don't know it's full structure. So the question is a little stupid, i guess :)
I have a view it is a nestedlist object. I have created a toolar object inside my nestedlist. Now I want to manipulate this toolbar from another view's callback. How can I access my toolbar object located in nestedlist view from event callback from another view object?
With that little information on your structure (are you using the MVC pattern? No example code given) I can only say that you can definitely achieve this with Ext.ComponentQuery
Lets say you added a custom property to your toolbar named ident='myToolbar' then you can access this toolbar (precisely said any toolbar with that custom property) by calling
Ext.ComponentQuery.query('[ident=myToolbar]')[0]
The result will be always a array but in this example we accept only one result, that is why I added [0]
For further information refer to the API. Ext.ComponentQuery is mighty if you know how to use it.
First give your toolbar an id, for example myToolbar. Then, in your callback, you can do something like this
var toolbar = Ext.getCmp('myToolbar');
to get your toolbar object. Next you can manipulate the toolbar using the toolbar variable, for example change the title:
toolbar.setTitle('New Title');
More info about getCmp() here.
More info about the toolbar here (Check the toolbar's methods to manipulate it).

Referencing current dialog in ExtJS from a CQ5 component dialog

I'm new to CQ5 and ExtJS and this is my scenario:
I created a new component with its own dialog for authoring. In the dialog I added a checkbox field with a custom xtype that I created. What I want to do is this:
Whenever the checkbox is checked/unchecked, I want to dynamically add/remove a TAB to the existing dialog to show further authoring options.
I've seen how to handle ExtJS' Window and TabPanel but I can't figure out how to get the reference of the dialog I'm in so that I can manipulate it (add/remove tabs).
I tried CQ.Ext.WindowMgr.getActive() to see if that gets me my window/dialog but it's not giving me what I expect.
Any ideas? Thanks!
You probably want to add listener(s) to your field.
http://dev.day.com/docs/en/cq/current/developing/widgets.html#Dynamic Dialogs
You should be able to use this.findParentByType to find the parent dialog.

Resources