Extjs 5 GroupGrid Capabilities (MVVM) - extjs

Hijust want to ask if Extjs Group grid have capabilities on displaying row data to other grid/window upon click on the main groupgrid instead of displaying by collapsible on the same grid, sorry I haven't created my own codes yet I just want to ask ideas if this is possible.
for example
main grid contains top providers records sorted by 'utilcost' upon clicking the record, another window/grid will pop up to show all the records under the clicked provider. By the way Im using MVVM architecture.
Thanks any answer or ideas will be gratefully appreciated.|
Thanks

Of course it is possible : listen to the itemclick event. The callback function takes the record as argument.
Look at the doc http://docs.sencha.com/extjs/4.2.2/?mobile=/api/Ext.panel.Table#event-itemclick

Related

WPF MVVM Filter Bubbles

I'm not sure if bubbles is the proper terminology, but this what I am trying to do...
I have a list of clients. The user can click a filter button and a filter panel slides down. The user chooses the filters they want and clicks a little green checkbox to set the filter. (Or a red circle with line through it, to cancel.) Once they set the filter, the filter panel slides out of the view.
I'd like the user to see a series of small filter "bubbles" at the top the list, showing the filters they have selected. Each bubble would have a little 'x' button they could click to cancel that particular filter. I've seen this on many web sites where you can filter down products lists, for instance.
So my questions are:
Is there a proper terminology for this? I've searched on filter bubbles and
breadcrumbs, but I'm not getting anything.
Is there an established MVVM friendly coding pattern, or control for this? I have some ideas, but I don't want to reinvent the wheel, if I don't have to.
Thanks for any insight.
J
In Angular Material design there are Chips (scroll down to see an example with the 'x' to remove a chip).
And there seems to be an implementaion of the material design in XAML which is also available as a NuGet package:
http://materialdesigninxaml.net/
It does implement chips, but the demo pictures don't show it. A simple search on the github page for 'chips' does show that they are present:
https://github.com/ButchersBoy/MaterialDesignInXamlToolkit/search?utf8=%E2%9C%93&q=chips&type=

How to dynamically update grid cell color and tool tip based on user action in Extjs 4?

Based on a user action, like click of a button, we need to update a grid cell and modify its background color and tool-tip.
Please note that it has to be only a particular cell of grid record and not the entire column affecting all the records.
Thus, how can we update these two things for a particular grid record cell - background color and tool-tip - dynamically?
Thanks for help in advance.
PS: ExtJs version 4.1.1
I have been able to find a solution for this. Though, not sure if its the best way, but posting it here as it may help someone looking for the same.
The solution is to write custom renderer function for the column which needs to be updated and calling the following code on the user action at which the update is required (like in the handler of the button clicked):
grid.getView().refresh();
The above code will invoke the column renderer function and this renderer function should be able to judge which background color and tool-tip to be applied at the grid column as per the current state of application.
Hope this helps.

Conditional Formatting based on layout view

Another question for you Filemaker Pro experts. The database I am developing starts with a Main layout with a number of buttons (e.g. insert new item, show all items, etc.). Each button is associated to a script, which takes the user to the relevant layout. In each of these layouts I show the buttons in a row, and highlight the current layout with inverse colour.
My problem is that some of the buttons lead to the same layout, viewed in different modes, and I don't know how to conditionally highlight the right button.
For instance, Insert new item and Show all items take to the same layout, however in the first case the script views the layout as a form and inserts a new record, while in the second I view as a list and show all records. The layout is the same, though, so I'd need to enact a conditional formatting based on something. How do I do that, and what should I check against?
Thanks in advance for any help.
Regards.
Presumably you are currently using the formula: Get (LayoutName) to decide on your conditional formula, why not try additionally using formulas: Get(WindowMode) and Get(LayoutViewState)?
You could conditionally format the button if (which sends user to MyLayout in browse mode):
Get(WindowMode)=0 and Get(LayoutName)="MyLayout"
Or (which sends user to MyLayout in form view):
Get(LayoutViewState)=0 and Get(LayoutName)="MyLayout"
.
Other functions which may help could be Get(FoundCount) and Get(TotalRecordCount). You can see the entire list of Get functions here.

Is it possible to move "Edit" and "Delete" buttons to the front in CRUD?

I created a model with ~30 columns, so every time I need to edit or delete something in CRUD, I have to scroll to the rightmost to find the edit or delete button. Is it possible to move them to the first 2 columns in the grid?
Also, it seems the CRUD class is derived from "View" rather than "Grid", so the addPaginator() function does not work here. Is there any way I can separate the data into different pages in CRUD? Thanks
CRUD is a container for both Grid and Form. Depending on how the page is called, it will initialize a proper sub-element. To do something with grid, such as adding pagination, you need this:
if($crud->grid)$crud->grid->addPaginatior();
Also if you are looking to re-order columns, then this is what you need to do:
if($crud->grid)$crud->grid->addOrder()
->move('edit','first')
->move('delete','after','edit')
->now();
Edit button moves just as Romaninsh said, but I'n not able to move the delete button...

How to update a Ext JS 4 grid when popup form is submitted

Please point me to an Ext JS 4 code sample of a grid with records editable via a popup form. It seems to be a common use case, but I can only find editable grids with editing in place.
My approach:
Each row in the grid has an Edit button, which shows Ext.window.Window with an item Ext.form.Panel.
When the form is submitted I have all the fields, which correspond to a record in the grid store.
I get record using:
var storeRecord = grid.getStore().getAt(index);
But when I modify properties of this record, and hide the form window, the grid does not show updated values.
Am I missing some step? Do I need to force refresh? Or maybe there is a standard way to configure the grid with an editor as a form panel?
After two days of searches, trials and errors, I found the solution:
grid.getView().refresh();
I wish there was a faster way for Ext learning curve. :(

Resources