GXT 2.25.
I have a screen with a layout container with a TableLayout with two columns. The left column has a tree grid. The right column is a layout container with table layout, one column.
When I click on various items on the tree grid, I want to display editable fields in the layout container on the right that match to the item clicked on.
When I first start the form and am loading the data from the server, I add text to the layout container and it seems to be fine.
After the text is loaded, I call secondLayout.removeAll() to remove all items. Then I click on an item in the tree. The selection method calls secondLayout.removeAll() and then adds a new text item "Loaded..." for testing.
private LayoutContainer secondaryLayout;
And then...
secondaryLayout.removeAll();
secondaryLayout.add(new Text("Loaded..."));
Ideas?
After making structural changes to a container, be sure to invoke (in GXT 2) the layout method to re-run the layout routines. The alternative is to configure the LayoutContainer to re-run layouts on each modification (using setLayoutOnChange), but that would in this case be at least two re-layouts - one for removeAll, and another for each new object added. Could be needlessly expensive, so better to run once and for all when you are finished making changes.
(Worth pointing out perhaps that GXT 2.2.5 is just over two years old, 2.2.6, 2.3.0 have gone out since then, and it is being superseded by GXT 3. In GXT 3, the method here would be forceLayout.)
Related
is it possible to configure agGrid grouping so that it behaves like an accordion i.e. only one group can be expanded and when opening new group previously opened is closed?
Not sure if this answers your question, but I am sure this might be the only direction you'll have.
There is a method provided on gridApi - onGroupExpandedOrCollapsed
So I think (again, need to check) that this function would be called as its name suggests, and you can collapse the other rows (whichever is opened) and achieve your functionality.
Be cautious while using this as there is comment given by ag-grid
we don't really want the user calling this if one one rowNode was
expanded, instead they should be calling rowNode.setExpanded(boolean)
- this way we do a 'keepRenderedRows=false' so that the whole grid gets refreshed again - otherwise the row with the rowNodes that were
changed won't get updated, and thus the expand icon in the group cell
won't get 'opened' or 'closed'.
I was wondering whats the best way around dynamically hiding some menu items. At the moment I have 6 items just in a matrix layout row. I want to have 3 items aligned left and 3 items alligned right. If one of the items is set to not visible I want it to move accross. I've done something similiar in a horizontal layout and setting the visibility to hidden. I was wondering if this would work with a vertical layout? Having trouble trying to figure out exactly how I would do it as I'm quite new to UI5 xml css and javscript. Any help would be great.
Also I'm having one other issue unrelated to this, I cant seem to bind my json model to my xml fragment, if I use the same code on my normal xml view it prints out the model data. But on my fragment it just prints it like {person>/fullName} any ideas ?
Belongs to your second question.
Maybe your binding was quoted on copy and paste? Check the native XML Code.
If no data are shown (not "{person>/fullName}"), add dependent to connect the models of your view
var oFragment = sap.ui.xmlfragment(sFragment, "fragmentName", this);
oView.addDependent(oFragment);
I'm using gxt 3.0.1 and I have Basic Grid added on my form.
Now I've added filter for each column which can be used over TextBox in menu of grid columns (basically it's Filter Grid now).
I have to make my own TextBox above grid and apply filter to it. And do that for each column of grid.
Filtering is done locally.
My idea was to look for code they made for their TextBox and apply it on mine TextBox.
But I failed.
It should be just String filter, which should work exactly as filter provided in Filter Grid.
Also I'm using UiBinder.
From the GridFilters javadoc
* Filtering is adjusted by the user using the grid's column header menu (this
* menu can be disabled through configuration). Through this menu users can
* configure, enable, and disable filters for each column.
This is meant to be used to configure column header menus to have filters built in, not set up text boxes outside of the grid - see http://www.sencha.com/examples/#ExamplePlace:filtergrid for how this is intended to work.
To build the way you are describing, start instead with making a StoreFilter object based on the contents of the TextBox, adding it to the store, and re-applying the filter each time the contents of the text box change.
Check out StoreFilterField for a working example, or follow the above instructions to build your own.
If this doesn't work, please provide a code sample in your question...
I'm building a Qt plugin with multiple forms. I have a main form which has a tree widget placed on the left of the form.
I want to add items to this tree, such that clicking on these items would load the corresponding form on the same form. But I want the tree widget to be active so that I can select any other form also.
I was able to display a form on the main form using the following code:
Form1 *myform;
myform=new Form1(this);
myform->show();
where Form1 is the class of the form i intend to display. However this, covers up the tree widget also. And I have to do a string comparison of the item in tree being clicked to display the appropriate form.
Can someone please help me with this as I'm very new to Qt programming.
Thanks
ixM has a good suggestion. The first step should definitely be to use layouts in your main window - separating the tree from the rest of the window - where you are going to put your form. I would suggest using a splitter, because then the user can resize the two halves. You can set the splitter as the main widget of your CentralWidget in your main window.
QSplitter splitter = new QSplitter(CentralWidget);
splitter->setOrientation(Qt::Horizontal);
splitter->setHandleWidth(3);
splitter->setChildrenCollapsible(false);
MyTree= new QTreeWidget(splitter);
splitter->addWidget(MyTree);
Then add your tree widget to the splitter, which will be on the left side.
The next step is to add a placeholder widget on the right side of your splitter. We are also going to add a layout inside that widget. This layout is very important we are going to use it later.
QWidget WidgetRightSide = new QWidget(splitter);
QVBoxLayout setupLayout= new QVBoxLayout(WidgetRightSide);
setupLayout->setSpacing(0);
setupLayout->setContentsMargins(0, 0, 0, 0);
Now, at this point, this is where my answer really differs from the previous answer. You could use a QStackedWidget. That is certainly an option. The problem with that is that you have to create and load all your forms at the beginning. That uses way more memory, and will take longer to start up. That's not so bad if you have 2-5 forms, but when we are talking about 20, 30 or more forms that's really ugly.
So what I would suggest instead, is that when the user selects something in the tree, we will remove the old form, and add the newly selected form at that point.
When the selected item in the tree changes this is now what we have to do.
First, remove all the stuff from the previously selection form.
QLayoutItem *_Item;
while ((_Item = setupLayout->takeAt(0)))
delete _Item;
Next, figure out what form to show next, and create it.
QWidget *ActiveSetupForm = NULL;
if ( I need to load form 1)
{
ActiveSetupForm = new YourNewForm( WidgetRightSide);
}
else ...
And lastly, add your new form to our layout.
if(ActiveSetupForm)
{
setupLayout->addWidget(pActiveSetupForm);
}
Just as a side note. Layouts are tricky to do by hand. I would strongly suggest that you look into using the QtDesigner when you are creating your forms. It makes life soooo much easier. If you would like to know more about it check out this link.
I don't exactly understand what you are trying to achieve but the bit of code you are showing suggests that you do not use the layouts provided by Qt.
If your goal is to be able to dynamically load a form depending on the item that was clicked in the tree, you could achieve that by having a layout (let's say QHBoxLayout) where you would insert your tree and a QStackedWidget in which you could "store" each form (by using addWidget()) and choose which one you want to display by calling setCurrentIndex().
I am using GWT 2.4's new DataGrid in a project. I configured the DataGrid with a pagesize of 50.
The available screen is not big enough to display all items and thus a vertical scrollbar is shown (this is actually the main purpose for using a DataGrid in the first place).
I attached a SingleSelectionModel to the DataGrid in order to be able to select items.
This works fine so far.
However I also have another widget with which the user can interact. Based on that user action a item from the DataGrid should be selected.
Sometimes the selected item is not in the visible screen region and the user has to scroll down in the DataGrid to see it.
Is there any way to automatically or manually scroll down, so that the selected item is visible?
I checked the JavaDocs of the DataGrid and found no appropriate method or function for doing that.
Don't know if this works, but you could try to get the row element for the selection and use the scrollIntoView Method.
Example Code:
dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView();
The answer above works pretty well, though if the grid is wider than your window and has a horizontal scroll bar, it also scrolls all the way to the right which is pretty annoying. I was able to get it to scroll down and stay scrolled left by getting the first cell in the selected row and then having it scroll that into view.
dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView();
Don't have time to try it out, but DataGrid implements the interface HasRows, and HasRows has, among other things, a method called setVisibleRange. You just need to figure out the row number of the item that you want to focus on, and then set the visible range from that number n to n+50. That way the DataGrid will reset to put that item at the top (or near the top if it is in the last 50 elements of the list backing the DataGrid). Don't forget to redraw your DataGrid.
Have you already looked at this? If so, I'd be surprised that it didn't work.
Oh, and since this is one widget talking to another, you probably have some messaging set up and some message handlers so that when the user interacts with that second widget and "selects" the item, the message fires on the EventBus and a handler for that message fixes up the DataGrid along the lines I've described. I think you'll have to do this wiring yourself.
My solution, a little better:
dataGrid.getRow(model).scrollIntoView();
I got a Out of bounds exception doing the above.
I solved it getting the ScrollPanel in the DataGrid and used .scrollToTop() and so on on the ScrollPanel. However, to access the ScrollPanel in the DataGrid I had to use this comment:
http://code.google.com/p/google-web-toolkit/issues/detail?id=6865
As Kem pointed out, it's annoying the "scrollToRight" effect after the scrollIntoView. After me, Kem's solution gives a better behaviour than the base one as usually the first columns in a table are the more meaningful.
I improved a bit his approach, which scrolls horizontally to the first column of the row we want to be visible, by calculating the first visible column on the left before applying the scroll and then scrolling to it.
A final note: Columns absolute left is tested against "51". This is a value I found "experimentally" by looking the JS values in the browser's developer tool, I think it depends on the table's style, you may need to change/calculate it.
Below the code:
public void scrollIntoView(T next) {
int index = datagrid.getVisibleItems().indexOf(next);
NodeList<TableCellElement> cells = datagrid.getRowElement(index).getCells();
int firstVisibleIndex = -1;
for(int i=0; i<cells.getLength() && firstVisibleIndex<0;i++)
if(UIObject.isVisible(cells.getItem(i)) && (cells.getItem(i).getAbsoluteLeft() > 51) && (cells.getItem(i).getAbsoluteTop() > 0))
firstVisibleIndex = i;
cells.getItem(firstVisibleIndex>=0? firstVisibleIndex : 0).scrollIntoView();
}