Referencing current dialog in ExtJS from a CQ5 component dialog - extjs

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.

Related

Component as grid emptyText in ExtJS?

I want to display a component as emptyText for a grid, the ExtJS documentation states that only HTML can be shown.
For example a button that pop-ups a create window, as shown below:
Is there a workaround to use a component in a grid, or perhaps even a config that I'm missing?
Of course you can do that, just that you will have to debug a lot in order to see how to do that. That's why I have an alternative: add a hidden docked toolbar with your "Create new employee" button. Then add an listener for the load store event, and when no records are available, simply show the toolbar, otherwise hide the toolbar.

How to hide a CQ component dynamically using Extjs?

I need to hide a CQ component from the page, when I select a particular value from another components dialog. Is this possible using ExtJS?
Yes, it is possible, but without more info it is difficult to give more details. In general, you can look up the xtypes you are using in your dialog at http://dev.day.com/docs/en/cq/current/widgets-api/index.html. Find the events that are available for the xtypes you are using in the dialog, then add a listener for one of the events exposed by that xtype. That allows you to run your own JavaScript code in response to an event--and that code could do things like hide HTML DOM elements.
Here is an example of using a listener to add custom functionality in response to an event: http://cq.shishank.info/2011/12/20/adding-limit-to-multifiled/
And here is another example: CQ5 - Hiding a tab within a component dialog depending on user group?

What is good choice between Modal Window & Dialog in order to display some data using MVVM Light Tool Kit?

I am new in MVVM world. I have a question about the child window and I want some explanation. I have some collection of data and I am displaying it in the datagrid of main window. I want to select a item from collection and want to display that data in some Modal Window, Dialog or Popup. I want to edit that data and these changes should be reflected in the datagrid of main window.
Can anyone tell me what is good choice among Modal Window, Dialog and pop up. I am using MVVM Light Toolkit.
In my opinion choise between modal and non-modal window depends only on the UI experience you want to achieve. If for some reason update of the row item can't be done simultanously to other actions on the grid items you need modal one.
As described here Dialog boxes overview
A modal dialog box is displayed by a function when the function needs additional data from a user to continue. Because the function depends on the modal dialog box to gather data, the modal dialog box also prevents a user from activating other windows in the application while it remains open.
Modal dialog would be easier solution as you dont need extra validation on the row you are editing - you simply can edit one row at the time (and I assume you it wouldn't be possible to remove this row in main view while editing in edit window).
If you want to have changes done in child window reflected in your main grid, just use observable collection of items in your main view and pass certain item from this collection as a DataContext of your child window.

Grids - Action Column to behave like a Flyout Menu

I'm using ExtJS for my project and can see that there is a way to embed "actioncolumns" inside of Grid columns. However, my "action" isn't just a single click, it actually needs to show a flyout menu (similar to the Menu control). Is there a direct way to do this in Ext? Or do I have to implement all this functionality myself?
There is no direct way. You need to create a menu and show it manually in the event handler for action button. You can also show menu as a context menu for the grid (right click).

combo with search and button-reusable in extjs

i am using a factory function (which has grids within windows called using button handler)within one form.
so when i click the button and open a grid and than close it,it works correctly,
but say for example in a situation:
if i open both grids and close , and than try to open other grid the previous grids contents are loaded,but as i have set the store to load in button handler that particular store is loading correctly(i have checked with fire bug) but contents of grid are not changing
win.hide();//use to hide the window after using it
closeAction: 'hide',//in window config
I am assuming that you are using gridpanels for each of these grids. You could force the stores to reload(). Or on the Window's close or hide event, you could try and clear the data on the store or reset the gridpanel.
You may want to read up on the closeAction property on the Window object. That lets you define the behavior of the close button on the window.

Resources