I'm working on an internal extjs 4 project. I have a viewport with tabpanel. Each tab has an associated grid with MANY records. When a user sorts, the column headings are still accessible and they can initiate a new sort while the first is still processing. I'd like to add a mask to either the tabpanel or full viewport while the sort is still in progress. Is there an easy solution to this? Sorry, I cannot post any code here as it's on our intranet.
Thanks
This is quite easy. Run this code while your records are being sorted:
var loadmask = new Ext.LoadMask(Ext.getBody(), {msg:"Sorting..."});
loadmask.show();
Note that Ext.getBody() could be substituted by another element, whatever you want, you should only keep in mind that Ext.LoadMask wraps element, so getBody(), getEl(), both work ...
Again, when your process is completed, simply use loadmask.hide()
Related
I want to reorder panels in an ExtJS 6.6 modern panel.
In an image archive, I want to have query form where I dynamically add query conditions. Each condition is a separate panel with the specific fields for that condition. They are added (like rows) in a vbox layout. The conditions may be ANDed and ORed, which means the condition order is important. In the form, I'd like to move the conditions up/down.
My approach to solve this is to remove the panel and then insert it at the new position.
I have a sample fiddle at https://fiddle.sencha.com/#view/editor&fiddle/2opr
The panel to be moved is removed but never inserted again.
When I've googled for this, many results comes up but they show solutions for older classic guis (calling the view's doLayout method), I'm using 6.6.0 modern where there is no doLayout method.
No need to remove the panel from the container, apparently removing destroys the panel.
Just change from this:
var item = this.removeAt(index);
to this:
var item = Ext.ComponentQuery.query('#' + itemId)[0];
Can we have a ExtJs5 Tree Grid Panel which provides below features:
Inifinite Scroll so that rows are rendered with some limit on scroll and not all records at sametime.
On Click of any root node of a particular row (could be 2/3 levels), i can fire a ajax call to populate a grid/form inside the expanded row.
Please provide your expert suggestions in this regard asap.
Thanks !
1. yes you can use infinite scrolling for TreeGrid. Checkout the example
2. If you want expand a row and inside that row you want a form or a grid, then I would say that is nearly impossible. You can only handle this with a custom renderer for the gridpanel and even with this you must create it via Ext.create and render it into the treepanel.
Why dont use something like this: https://fiddle.sencha.com/#fiddle/l26
I have an array of objects that I want to show in ng-grid. Each row has a boolean property isVisible. In the ng-grid I want to show only the rows where isVisible is true. The other rows should be completely hidden.
I have tried using a rowTemplate and databinding a ng-show to isVisible. That hides the content of the row, but leaves the actual row in place, showing an empty row.
I have tried using filterOptions, but can't figure out the correct syntax to do such a filtering. I couldn't find any good documentation on how to set it.
I have even tried modifying the gridTemplate in the ng-grid source, by trying to add a filter on ng-repeat=\"row in renderedRows\", but I haven't gotten that to work either.
I guess I could modify the array itself, by temporarily removing rows, but I would prefer not to do it that way, since I have to be able to show the rows again (It is actually an expander that I'm doing, that should hide/show sub-rows)
Try also conditionally setting the height of the row in the template to '0' based on isVisible or use a CSS class with ng-class. Play with the CSS of it until you get the desired effect and then you can use that in your template.
This sounds like the type of thing that would benefit from using height and CSS animations actually so it opens and closes with an animated style. If you have a jsFiddle sample I'd be happy to try and help.
Edit: After looking at how the grid actually lays out it's rows (absolutely positioned) you only really have two options I can think of:
1) Filter the data you are binding to the grid through a function like dataVisible() but keep the full data list internally in the controller so you can show/hide easily
2) Submit a patch to the ng-grid project (or fork it) with the filtering capability you are looking for. Out of the box it doesn't appear to support this scenario.
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...
I have two data grids. The first auto-loads a list of items (json data store). OnCellClick the first grid fires a dynamically parametrized url and loads data into the second grid. It works fine, but the pagination of the second grid does not focus the new context.
What shall I do to make the pagination work with the new url?
hm your pagination and second grid (which is the one to be dynamical) should share the same store, now on cell click you should only reconfigure the store and start loading it.
if you do like this both grid and pagination will work just fine...
i think currently your paginations uses another sotre (another instance or something) but it MUST use the same store as the second grid...
Not sure what you exactly mean with "does not focus the new context", but are you passing the start and limit parameters to the second grid in the params array of the jsonStore.load call?
If you just want to focus the grid on certain row, you can use focusRow method of GridView.
Perhaps you could post a code example if this did not help?