I'm trying to get a grid to occupy the entire space within a panel and after having searched through this forum i read that a fit layout should help with such a case. However, i'm still having problems getting it to do so.
{
xtype:'panel',
layout:'fit',
items: [{
xtype: 'grid',
store: 'DimensionStore',
id: 'dimension-grid',
padding: '0 5 0 5',
viewConfig: { emptyText: '<div style="padding:10px;">No dimensions found...</div>' },
columns: [{
header: 'Name', dataIndex: 'DimensionName', flex: 2
}]
}
}]
}
The only way it works is to set an absolute height for the grid,but that defeats the purpose since the panel + grid lies within a window that is expandable and doesnt look nice when it does get expanded.
Based on the image you showed us, it looks like the layout issue is with the top "Dimensions" panel containing your text field and grid. That's actually the component in charge of layout here, not the grid.
There are a couple things you can do, depending on how you intend for this to be used. The easiest solution would be to use a "vbox" layout. The "Dimensions" panel would have two items, one for a panel with a fixed height containing your text field, the other containing your grid with a flex of 1. That way, the grid will fill the remaining area.
Ext.layout.container.VBox documentation
You could also use a border layout with your text field as the "north" region and your grid as the "center" region with "fit" layout, which will accomplish the same thing.
Ext.layout.container.Border documentation
This is all based off your limited code sample and linked image. You may need to provide a more complete code example to facilitate further assistance.
Related
Is it possible to set a x-scrolling in react-virtualized? I have a table with a fixed width, and more columns to display than I got space in my table, so I need a x-scrollinig. In my tests if i did it, the table just shrinked up and did just display '...''s for content if the table runs out of space.
Intro paragraph for react-virtualized Table docs (emphasis added):
Table component with fixed headers and windowed rows for improved
performance with large data sets. This component expects explicit
width and height parameters. Table content can scroll vertically but
it is not meant to scroll horizontally.
You might be able to hack it, but it isn't meant to support horizontal scrolling so it probably won't work. Consider using Grid or MultiGrid instead if this is a requirement for your app.
I was struggling with this myself for a while. I did it by by setting the width of the table to width={Object.keys(rows[0]).length*150} and set each column min width to 150 (or whatever you choose just make sure it is the same in your table).
Then wrap it in a Paper and give it a width and overflowX:'auto'
something like this:
const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
export default function DataPreview(props) {
const rows = [{ One: 'one', Two: 'Two',Three: 'Three',Four:'Four', Five:'Five', Six:'Six'}]
return (
<Paper style={{ height: 400, width:700, overflowX: 'auto'}}>
<VirtualizedTable
width={Object.keys(rows[0]).length*150}
rowCount={rows.length}
rowGetter={({ index }) => rows[index]}
columns={Object.keys(rows[0]).map(head=>{return(
{
minWidth:150,
label:head,
dataKey:head
}
)})}
/>
</Paper>
);
}
Building on bvaughn's accepted answer, the hack for a horizontally scrollable table could look something like this, however, beware of the following caveats that come with this hack:
Your overflowing Table columns will not be virtualized
The scrolling focus gets captured by the wrapper's x-axis scrolling and you will need to click within the internal Table component to refocus and regain y-axis scrolling. This is incredibly frustrating to use especially on mobile devices.
I would like to create a continuously scrolling ticker which has got variable width items in it. This is going to be used for a news ticker where the news items are aligned one after each other depending on their width according to the news title length. I would need them to continuously scroll towards the left in a continuous manner in an equal, linear easing manner.
Is this possible through caroufredsel?
Set duration to .1
$("#foo").carouFredSel({
scroll: {
duration: 0.1
}
});
Source:
http://support.dev7studios.com/discussions/caroufredsel/UC-951092
Please have a look at this demo:
http://coolcarousels.frebsite.nl/c/23/
Try to check this example
http://caroufredsel.dev7studios.com/examples/continuously-scrolling.php
I think you just need to add - items: {width: "variable"} - and will work
I've been using gRaphaël charts for a few weeks now, and every now and then I get some weird issues. A recurring theme is that the pie chart legend labels all get squish together in the wrong places. Picture > words:
The chart is created as you would expect, in this case:
var r = Raphael(domNode, 300, 120);
this.chart = r.piechart(55, 55, 50, [75, 25],
{
colors: [
"000-#d00-#900",
"000-#3a3-#070"
],
legend: ["Building", "Tertiary Education"],
legendpos: "east"
});
I then do some more basic styling, but turning that off doesn't help. The problem is clearly visible in the <svg> node (the text and circle nodes share overlapping positions), but I don't know where it comes from or why, and it only happens sometimes; other charts work just fine. There's nothing on the forums or issue tracker either, though I just realised I should probably ask there instead/as well.
Using Raphaël 2.1.0 and g.Raphael 0.51.
I have found the following blog post which deals with this exact problem. If the pie chart is rendered in an initially hidden element, gRaphael has problems to compute the positions properly resulting in this stacked legend:
So the solution is to render the facebox partial first, after the
facebox is shown, then you execute the Raphael Javascript. In other
word, make sure you generate the chart when the chart container is
there and not hidden!
I have solved this by moving the create pie chart function from the jQuery document ready directive to the on click event that will make the hidden elements visible.
Try to define your legend as following
{ legend: ["Building", "Tertiary Education"] , legendpos: "east"}
Its the only difference taht I could find between your and my working jsfiddle
I'm working on project with heavy usage of ExtJS lib and so far as i'm not really good in pure CSS crossbrowser layout developing, i decide to use ExtJS layouts for robust markup prototyping. There is only one problem -- i can't figure out how to make my pages scrollable, like in traditional sites. ExtJS just clips any content overflowing browser viewport, "autoScroll: true" makes no effect.
Based on the first ExtJS4 release and is no longer valid for newer versions
It depends on your layout... A viewport should only contain one element and will also ignore scrollable settings. That's because the viewport use the fit layout by default. Give the scrollable setting to one item of the viewport that will contain all your content and remember, this one cannot be of the layout type fit.
{
xtype: 'viewport',
items: [{
autoScoll: true // will be of xtype panel by default
items: // you content
}]
}
In extjs4, 'flex' is used to flex items for horizontally according.
items:[
{text: 'item1', flex: 1},
{text: 'item2', flex: 1}
]
Are there some properties for vertically according too?
The flex option is used in vertical box layouts (like vbox) similar to the way it is used in horizontal layouts (like hbox). With the difference that it is used for vertical flexing, even so the API documentation said otherwise. (It's just a flaw in the documentation).