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];
Related
Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown.
The problem now:
The virtualized list is hiding overflow. So the last items dropdown is not displayed and you cannot scroll down to view the content of the dropdown:
================= Here is where the image ends ================
I have no idea, how I could fix this issue, without changing the virtualized list code. Anybody out there?
react-virtualized can't use overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). So things like drop-downs will get clipped as you've observed.
What I typically recommend for people wanting to put things like drop-down menus inside of react-virtualized rows is to use a portal. This allows the menu content to expand outside of a single row (or even the entire List) without being clipped.
I've used tajo/react-portal in the past for this.
I have an ag-grid (free reactjs version) with lots of columns and records to load.
Some columns are not necessary, so the user can drag the columns out of the grid (and hence hide them). This is fine but how can the user show the hidden columns again without refreshing the page?
I don't want to suppress column drag, just a way to undo the hide without refreshing.
Any advice?
Shameless plug: The enterprise version has this feature in two places, Tool Panel and Column Menu.
However, thankfully it is rather easy to implement this feature yourself using a single columnApi call, well... one of these:
resetColumnState()
This will reset the state of the columns to what you initially defined them as. It will basically make everything visible again
setColumnVisible(colKey, visible)
Just pass in the colId of the column (usually what you passed in as 'field'... but it could be different depending on your set up) and a truthy or falsey value and this will show/hide the column
setColumnsVisible(<Array> colKeys, visible)
note the s - other than that it is the same as before, but you provide an array of colKeys that you want to all be hidden or shown. If you wanted to provide an array of all your columns with another array of whether they should be shown or not then use the last option here setColumnState
setColumnState(<Array> columnState)
This is probably overkill for what you are trying to do, but this will allow you to set the state of all the columns, whether they are visible or not, pinned to different sides, fixing the widths, etc.
Basically I can see you doing one of two things:
Create a button that will make all the columns visible and call gridOptions.columnApi.resetColumnState() when it is clicked
-- OR --
Create a list of check boxes that will listen for a change and call one of the other functions. This list could be outside of your grid, or even inside of your grid in a Custom Filter Component (find the athlete column of the first example to see what I mean.)
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
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.
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()