ExtJS - Nested Window/FormPanel - extjs

This is sort of a subjective question, but I'd like to get some ideas on the best way to lay this out. I'll set up the situation for you.
I have a grid with a column that allows the user to "View Details" on a particular item. The grid also allows the user to select multiple rows and "View Details" on those items. When the user clicks "View Details", a Window will pop over the grid, with a form inside it and controls to navigate between the multiple items (if they selected multiple items).
Here's a picture for an example:
I have no problem creating the Window, but I'm curious as to how to handle multiple "FormPanels", if that makes sense? Would I need to create another Panel inside the container Panel for each item they have selected, and then hide/show based on the active item (shown as "Item #1" in the dropdown)?
I'm thinking of it like a deck of cards in which you can navigate through, but I've never done something like this before. Also note that each item/card will be prepopulated with information from the grid, but that should be easy enough to do if I'm using the same Store.
Thoughts?

Yes you're right, and the layout you're looking for is the CardLayout.
You can read about it in the API here. The basic idea is like you said, a stack of cards that contain components, and you shuffle through them by calling the relevant methods.

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=

ExtJS: Select/highlight multiple items in menu

I have a menu with a list of items.
I'd like the user to be able to select multiple items (without menu auto-collapsing). His/her selection should be communicated by highlighting the selected items. So what I need is:
A way to suspend menu auto-collapse on clicks
A way to highlight (select) specific items
A way to see which items are selected
Currently, I don't see methods in the API to do this, and answers from similiar questions are dated (~2007) for which the API no longer exists.
Help?
That sounds like a checkbox menu, take a look at Ext.menu.CheckItem.

Adding a button to the end of the grouped gridview

I am looking into adding a button to the "end" of the grid view.
The idea is that I have a grouped view showing groups and items with in these groups. I only show some of the items within the group and wants to show a "load more" button at the end of the items shown.
I have tried all kinds of things in the standard grouped items page with no luck.
Any good ideas?
Thanks in advance
Kim
The simplest answer is to follow the approach used by most existing apps: Allow the user to click on the header to display all the items.
You can also add the "Load More" button as if it was a normal grid item. Then, style it differently using a different template and ItemTemplateSelector.
Finally, the most complex (and flexible) solution would be to put the "Load More" button above the GridView, and manually sync its location when the GridView is scrolled...

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

Resources