I have an Ext.tree.Panel with a rowWidget using Ext.grid.Panel, when I lock the first column of Ext.tree.Panel the rowWidget expansion doesn't expand the locked column all the way.
I understand that when I lock a column the tree/grid split into 2 synced grids, one for the locked columns and another with the rest. The rowWidget expansion occurs only on the unlocked section.
I would like to know if there's a way to properly sync the expansion of both grids.
I built a fiddle reproducing the situation from image above. If line 41 (locked: true) is removed, the locking on column, it works just fine.
TREEPANEL_LOCKED_ROWWIDGET
Thanks in advance!
You could force a refresh on the locked grid when the row widget is expanded;
Fiddle
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];
Just starting to work with AngularJS and ui-grid, and I encounter a major issue.
My problem is as following:
I use different ui-grid components in the same HTML page. All of those ui-grid components have one specific identifier in common.
For example, let's take 2 ui-grid as example :
[ui-grid N°1] identifier is defined in a row entity value.
[ui-grid N°2] identifier is defined in a column title name.
One of my requirement:
When clicking on the row where the identifier is defined [ui-grid N°1], it shall highlight its entire row [ui-grid N°1] AND the entire column of the other grid [ui-grid N°2] where identifier is also defined.
The row selection isn't an issue and I succeeded to highlight the entire column of the second ui-grid thanks to specific cellClass function and, more important, the
gridApi2.core.notifyDataChange(sourceGridConstants.dataChange.COLUMN);
This worked fine until I had to apply a cellTemplate option to the ui-grid N°2.
cellTemplate:'<span ng-click="grid.appScope.gridCtrl.cellClicked(col)">{{row.entity.name}}</span>'
Now, when firing the notifyDataChange, nothing happens.
If I remove the cellTemplate option, the refresh is done on the grid and the column is highlighted as expected.
Has anyone encountered this issue ?
If so, is there any way to refresh the grid with a cellTemplate option defined ?
I've built a simple master - detail form consisting of a form for the master element and table for the details.
In the toolbar of panel collection around the table I placed a CreateInsert button which ads a row to the table. My problem is that I this row is invisible until after I move my cursor over to the table and scroll down. Then it appears.
Before that a small scrollbar appear after pressing the button which can't be pressed.
Related to this is the problem when I press the delete button in the details, the table gets cut in half. I suspect these two problems are related.
This is my table:
This is after I press CreateInsert. The table should add another row below this one, and it does, but it is not visible until after I scroll. This happens only for the first row.
I am using JDeveloper 12c with Oracle ADF Fusion Web Applications.
This is a late answer I know , but try to programmatically refresh the PanelCollection and its container.
AdfFacesContext.getCurrentInstance()
.addPartialTarget (getThePanelCollection());
AdfFacesContext.getCurrentInstance()
.addPartialTarget (getThePanelCollectioncontainerLayout());
I tried this myself and it solved the problem after trying many other solutions.
Did u check with the Size.?
Try giving Styles for Table and Panel Collection "StyleClass=AFStretchWidth"
Add Execute in binding side of the jspx page for the particular table
Add invoke action for the execute in executables
Change the properties to render model in refresh condition of the invoke action
It will automatically make the master table to trigger the new values
Thanks
I am using grouped grid containing a checkcolumn. I need to control the selection of the check boxes , that is allow or not allow selection. I use the beforecheckchange function to do that. To explain the issue consider the scenario. There are five group each containing 3 rows out of which only the last group is only expanded. If I would selected last row check column, the rowIndex that would be returned would be 2, because only 3 rows are visible. That is virtual or visible rowindex is returned how to know/get the actual row index without all the group being expanded.
My Bushiness requirement requires me know the exact row index to get the record from the store. The check column is mapped with data/record from the store that allows me to take decision to allow check on the check check box. Also one from lower group is checked then same level check box from higher need also be checked.
I am using ExtJS 5.x.x framework.
I have checked the same issue exists with tree grid.
Thanking you in advance.
I believe that this would solve your issue:
// You checkcolumn listeners
listeners: {
beforecheckchange : function(component, rowIndex, checked, eOpts) {
var row = component.getView().getRow(rowIndex),
record = component.getView().getRecord(row),
realIndex = component.getView().ownerCt.getStore().indexOf(record);
console.log(rowIndex, realIndex);
}
}
Demonstration Fiddle: https://fiddle.sencha.com/#fiddle/c3e
What version of ExtJS are you using?
There are at least two known grouping bugs in ExtJS 4.2.1, fixed in 4.2.2 (EXTJS-10027) and 4.2.3 (EXTJS-10043), respectively.
It would be easier to fix these bugs in your version of Ext (or by simply upgrading) than writing workarounds for each and every grid.
If this does not solve your issue, and you are on Ext4, consider abusing the "convert" function on the underlying model. This won't work in ExtJS5 any more, I fear, but for the time being it is a good interim solution.
I have a problem with extjs gridpanel dragdrop.
the scenario is as follows:
The gridpanel is initially rendered by loading a remote store.
Then, the rows are added, updated dynamically.
Drag drop feature is implemented on "render" event of gridpanel.
Drag drop works fine for the originally retrieved rows from the remote store.
but when i try to use drag drop for the newly added or edited rows, it doesn't work.
I am getting the following error on firebug:
Index or size is negative or greater than the allowed amount" code: "1
This is may be because , the newly added rows are not taken as a part of the store . I tried changing the event to "click" but it doesnt work that way..
Please please suggest a solution for this fast.. Its needed urgently.
Thanks,
Shreya.
I know 2 methods for drag and drop in ext, one of them is only for grid rows, the other one that I'm using is with setting dragzones and dropzones. With that method, the only thing you have to do is catch an event which is fired when you add new rows to the grid. In that event, set every new row to be a dragzone (so it can be dragged). That's what I did in a similar situation. Hope this helps..
By the way grid rows don't have a .el (DOM element attached to the Ext component, which is the row in this case). So you'll have to create a div for each row component and then use the initializeDropZone(row[x]), where row[x] is the new added row.