I'm putting several ag-grids on one page, all with less than 15 rows, but none with the same size. So I need the grid to 'snap' to the number of rows and the column width with no scroll bars.
Setting griOptions.domLayout='autoHeight' worked perfectly for the height. Setting to 'print' is also ok.
But what do I do for width?
I can get the columns the minimum width with : this.gridColumnAPI.autoSizeAllColumns();
How to I shrink the overall grid size to insure i don't get scroll bars?
this.setWidthAndHeight('XXXpx','YYYpx') doesn't seem like an option since the height was set by domLayout.
EDIT1:
I do not specify widths in my columnDefs:
columnDefs = [
{headerName: 'Category', field: 'category' },
{headerName: 'Percent', field: 'percent' },
{headerName: 'Count', field: 'count' } ];
EDIT2:
I wrapped the ng-grid in a div with style="width:500px;height:500px" , and the grid conformed to that, so I'll be trying to dynamically set the style of that div once the gridReady event fires.
So how do I get the dimensions of the grid at any point? I know I can mine the columnApi for width of each...
Currently elements(divs) are placed as on the left side of an image.
Is there a way for them to be ordered without spare space between them (as in right side of an image)?
Here's my ui-sortable settings:
vm.sortableOptions = {
'ui-floating': 'auto',
connectWith: '.connected-columns',
placeholder: 'board-issue-placeholder'
}
I have a JQuery UI dialog with two columns of form elements. I'm using CSS float: left to create the columns. The problem is the dialog only shows a single column. What am I missing?
http://jsfiddle.net/CV9RG/1/
You columns has float:left it means if they don't have enough space on the parent to stay side by side they break in a new line. You can set a width for the dialog to auto and fixed for your columns to make it fit:
$('#mydialog').dialog({
modal: true,
resizable: false,
autoOpen: false,
dialogClass: 'no-close',
width : 'auto'
})
and CSS :
.select-col { float: left;width:250px}
See this demo http://jsfiddle.net/CV9RG/11/
I'm having a few issues when attempting to make the switch from extjs 4.0.7 to 4.1.1.
The first issue is as follow:
I have two treepanels which are within a column layout. One right next to the other. My app loads a bunch of nodes into the left panel, and then you can optionally move some of them to the other panel. However, the panel with all the nodes is not showing a scrollbar, and thus I can't see about 1/3 of the nodes all of a sudden. I had a semi-similar issue in 4.0.7 where I couldnt see the last node moved if the panel was full until I moved another node. I fixed that with the following lines:
treePanel1.invalidateScroller();
treePanel2.invalidateScroller();
These lines are deprecated in 4.1.1, and the problem seems to have become worse. Has anyone had a similar issue, and how do I get my scroll bar back.
A second major issue related to my UI:
I have two grids right next to each other elsewhere, layed out similarly to the treepanels. I've set up drag and drop between the two grids. Again all the nodes start in the left grid, with the option to drag some into the right grid. However, the right grid is now not showing at full size, it is defaulting to a sliver. So, the DD functionality is still there, if you know to drag the node to that little sliver. Afterwards, the sliver expands enough to hold the single node and so on. So, how do I get it back to defaulting full size. Why had extjs 4.1.1 caused these issues? I'd have to fat finger in any code, but can if absolutely neccessary. However, if anyone is familiar with this type of issue based on my description, that would be great.
Edit: Also, I have a combobox in the right-most column of the grids. When I click to change one of the comboboxes, a mini scrollbar thing pops up that sort of blocks the dropdown button. What have they done to this version?
Here is the layout definition where I have the first problem where the scrollbar doesn't show up on the panel when it needs to:
{
xtype: 'panel',
title: 'Select fields',
defaults: {
border: false,
height: '100%'
},
layout: 'column',
items: [
{
xtype: 'treepanel',
itemID: 'choicesTreePanel',
title: 'Choose from below fields',
height: '100%',
multiSelect: true,
store: choicesTree,
rootVisible: false,
columnWidth: .44},
{
xtype: 'panel',
columnWidth: .06,
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
margins: "15 0 0 0"
},
items: [
{
xtype: 'button',
text: '==>'},
{
xtype: 'button',
text: '<=='},
{
xtype: 'button',
text: 'RST'}
]},
{
xtype: 'treepanel',
itemId: 'chosenTreePanel',
title: 'Fields',
border: true,
store: chosenFields,
rootVisible: false,
columnWidth: .44,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop,
dragText:'
dragginggggg '
},
ddGroup: '
fieldsDD '
}
},
{xtype:'
panel ',
columnWidth:.06,
layout:{
type:'
vbox ',
align:'
center '
},
items: [
{
xtype: '
button ',
text: '
UP '},
{
xtype: '
button ',
text: '
DOWN '}
]
}
]
}
Edit: on the left panel, if I make height a set value, and autoscroll true, I have a scrollbar. If I set height '100%' and autoscroll true, there is no scroll bar. So a solution might be to find out how to have the panel fit the height of the parent, while maintaining the scrollbar
Although you are looking for a percentage based height solution, you can also use a constant value height. In many cases this will avoid your problem. For example, set the panels to 600 height, that should fix the scroller issue.
This does not solve your issue in percentage based layouts. Hopefully someone else can provide help with that.
(maybe it is best to split your question into multiple separate questions)
Concerning your first question about the panel height and scrollbar:
In your example I would ask myself the question "I want the treepanel to have a 100% height related to what?".
A column layout is typically used when you don't care about the height of the child elements related to their parent: the sum of the height of the child elements define the height of the column as you can see here: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html.
You did not define any height on the columns, so it uses the height of the child elements (which have no height in your example). I don't know what Ext does in this case, but based on this, it cannot do anything smart.
If you want the treepanel to use the whole height of the containing panel, you would use a hbox layout with the align property set to stretch.
That might fix the scrollbar too since height calculation can be done properly.
Don't forget to remove the "height: 100%" and "autoscroll" properties since they mix things up.
Finally, changing the layout of the treepanel to 'fit' might give you the result you are looking for.
Your code might become something like:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'treepanel',
layout: 'fit',
flex: 44,
...
}, {
flex: 6,
...
},{
flex: 44,
...
}]
}
I did not test this answer on your code. Please provide a full working code sample (with a dummy store) and I'll test it.
I want to create a panel with rounded edges. I have images for round edges mainly top left, top right, bottom left, bottom right. I also have a center image which I can spread across the panel using CSS background-repeat property. I could not find any straight forward way to do this so I chose to extend the Ext.Panel class and create my own with just the look-n-feel change. The approach I chose was to create a table with 3 rows and 3 columns. 1st row will contain place holders for top left, top and top right images, 2nd row will contain center area where all the children of this panel will get added and 3rd row will contain place holders for bottom left, bottom and bottom right images. Below is the code for my Panel.
Ext.namespace("Ext.nDisks");
Ext.nDisks.RoundedPanel = Ext.extend(Ext.Panel, {
// Rounded Panel code.
autoEl: {
tag: 'table', cls: 'rounded-panel-table',
children: [
{tag:'tr', id:'row0', children:[
{tag: 'td', id:'col00', cls:'ptl'},
{tag: 'td', id:'col01',cls:'pt'},
{tag: 'td', id:'col02',cls:'ptr'}
]},
{tag:'tr', id:'row1', children:[
{tag: 'td', id:'col10', cls:'center', colspan:'3'}
]},
{tag:'tr', id:'row2', children:[
{tag: 'td', id:'col20', cls:'pbl'},
{tag: 'td', id:'col21', cls:'pb'},
{tag: 'td', id:'col22', cls:'pbr'}
]}
]},
constructor: function(config) {
Ext.nDisks.RoundedPanel.superclass.constructor.call(this, config);
}
}
);
I have couple of problems with this implementation.
When I instantiate this class like var roundedPanel = new Ext.myns.RoundedPanel(); it creates a table element assigning it the generated id(which is what it should do) but within the table, it creates a div element along with tbody. How do I get rid of this unnecessary div element.
When I add any component to RoundedPanel it does not add to the table, but gets added to the generated div element. How do I get new element added to the 2nd row of the table which is the main container area.
Figured out the way to do it. In the config of Ext.Panel, enable the flag frame. This inserts a table in dom which has its on CSS. Now override the CSS for top left, top right etc with custom images to get a custom rounded edged panel.