I am using Sencha GXT 4.0.2. I have added Grid inside a BorderLayoutContainer. When the UI is rendered, there is a small gap between the column header context menu arrow and next column header. For eg. width of <tr> is set to 100px, but width of <div> in header is 87px.
Following is the flow of control:
view -> BorderLayoutContainer -> BorderLayoutContainer -> FlowLayoutContainer ( as center layout data) -> Grid ( as widget )
When I add the editor to this grid, and start editing, all the columns of the selected row and its editors are shifted to left (as if they are inline with the <div> element's width).
The problem I am facing is similar to what is posted in gxt (ext gwt) Grid and column width for gwt ext, but my issue is with Sencha gxt.
Any help is much appreciated.
header misalignment
editor-misalignment
This particular problem occurs when the grid is not provided with a size from either the parent container or directly with grid.setPixelSize(int, int). You can test this out by setting grid.setPixelSize(500,500) and the columns and rows should be sized properly. If that doesn't work, a test case with the problem would be needed to replicate the issue.
Related
How can I make the row height of a grid taller?
You should try creating a custom CSS class for the row element. You can add some runtime code to the .cs code file for the page. See this article
I have noticed that when I have cells with a lot of text, the table will not scroll vertically. As I scroll down, the table jumps back to the top. The behavior is a function of the amount of content and the width of the column. A wider column can handle more content before this behavior is seen.
I thought this was due to my own custom formatter, but it also happens for the textarea and html formatters.
This can happen if the row content is significantly longer than the height of the table.
In this case you can improve the scroll stability by increasing the size of the virtual dom render buffer on the table. this is the amount of space that the table renders above and below the table to allow smooth scrolling.
It is be default set to 2 times the height of the table. You should make sure it is at least 5 times the height of your tallest row.
This can be done using the virtualDomBuffer option in the table constructor:
var table = new Tabulator("#example-table", {
virtualDomBuffer:300, //set virtual DOM buffer to 300px
});
More information on this can be found in the Virtual DOM Documentation
Though from a user experience perspective i would query whether a table is the best way to layout data if it takes up a large vertical space. It would probably be clearer to display summary information in rows, and then use either a rowFormatter to toggle a details section under the row, or a modal to show more detail
I have a List component from react-virtualized where I am using the height prop to set its row height. However, the horizontal scrollbar is overlapping with the last row, making it hard to see the text content of the last row. Is there a way to increase the height of the last row so that the horizontal scrollbar doesn't overlap with the text. Doing this dynamically in code messes things up when one is dealing with a dynamic List growing in real-time. I tried using the last-child selector but had no success. Any insight would be appreciated.
The react-virtualized Grid component accounts for horizontal and vertical scrollbar size to avoid this problem. (You can see this on the Grid demo page.) However it's expected that the List component will not scroll horizontally so it will only account for the vertical scrollbar size.
If your UI needs to scroll horizontally, you may have better luck using a 1-column Grid.
sorry for my question, but I'm android beginner :-)
I need help just with create layout, some best practices for my solution.
My requested layout must be on the screen splitted to 3 parts:
header as expander - if possible
fix size (height 200px / width fill) of the screen - if expanded
linear layout - horizontal with 3 rows of labels
only first label is visible if expander is collapsed
top of screen
body
dynamically resize (height fill place between header and footer / width fill)
scrollable vertical
horizontal will change body with another (not necessary now)
in body will be two level list - headers as parent, expandable to child
List item
fix size (height 200px / width fill) of the screen
linear layout - vertical (with 4 images icons)
bottom of screen
My basic problem is how create basic layout (header / body / footer) as panels in whitch I can add next controls.
Create it as linear layout?? How correct fix it on the screen? What header as expander?
On lunch, my application is loading a data store and is creating some Ext.panel.Panel inside an accordion layout based on the number of items in the data store.
Is there a way to auto adjust the height of the accordion Panel ? The height should be determined by the number of Panel inside the accordion Panel.
I did it by setting the height manually.
I estimated that each accordion item is 37 pixel. And I am adding 100 to leave space for the text inside the accordion items.
myPanel.setHeight(records.length*37+100);