Develop Reference

Scrollable Attributes Grid Container - extJS

I am working on making a container in extJS that will dynamically add Attribute Grids depending on the user clicking a row on another grid within my form. I would like for this container which is housing the Attribute
Grids to be scrollable so that the container would remain a fixed size, but the user can add or remove as many attribute grids inside as they'd like.
Here is a snippet of my code that I am using to create my container:
Ext.define('SSAF.plugin.CHEF.view.chefAttributeGridContainer', {
extend: 'Ext.container.Container',
autoScroll: true,
layout: {
type: 'vbox'
},
width: 400,
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// implicitly create Container by specifying xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [
Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid'),
Ext.create('SSAF.plugin.CHEF.view.chefRunListAttributesGrid')
]
});
Although I have added the autoScroll attribute to my grid, I am not receiving the intended effect.
Here is how it currently looks:
I would like it to remain a fixed size just like all of my other components within my layout:
Any idea as to what I may be missing in order to achieve my desire effect?
Thanks

I was able to solve my problem with the solution offered by this post:
Grid AutoScroll

ExtJS paging toolbar malformed

Using ExtJS 4.2.1 I added a paging toolbar to a grid panel. Everything works fine except that the toolbar is rendered malformed. The page input field is far to small and has some weird frames around it. With a little luck I can type something into the field but I can't read anything. I see this with both default theme, neptune and gray theme and it is the same for Chrome and Firefox:
I used the default themes. Any idea about this?
In case this is a theme or CSS related problem (is it?) here is what I am including currently (trying neptune theme):
<link rel='stylesheet' id='extjsstyle-css' href='http://127.0.0.1/wordpress/wp-includes/js/extjs/resources/css/ext-all-neptune-debug.css?ver=3.8.1' type='text/css' media='all' />
<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-dev.js'></script>
When adding the following include as proposed in another thread it gets a little better (frames little more centric) but still no number visible and toolbar still much to high:
<script type='text/javascript' src='http://127.0.0.1/wordpress/wp-includes/js/extjs/ext-theme-neptune.js'></script>
This is the code that fails for me:
var dummyStore = Ext.create('Ext.data.Store', {
storeId: 'DummyStore',
pageSize: 1,
fields: [ 'Data' ],
data: [ { Data: 0 } ]
});
var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
store: dummyStore,
dock: 'bottom',
displayInfo: true
});
var panel = Ext.create('Ext.grid.Panel', {
title: 'Test',
store: dummyStore,
columns: [ { text: 'Data', dataIndex: 'Data', flex: 1 } ],
height: 550,
width: 620,
renderTo: 'myHtmlDiv',
dockedItems: [ pagingToolbar ]
});
However I don't think this problem is data store related.
I did not do any stylings on my own.
UPDATE: If I copy the essential code and the includes into a blank HTML file, everything is displayed properly. Obviously this is a problem that arises due to something that Wordpress adds to the page. In the moment I have no clue how to tackle such a problem.

Using Chrome developer tools I compared the HTML representations of the input field table of my broken toolbar and the Sencha example. There are differences. The broken input field sub tree has:
"numberfield-1014" -> "top: 13px" instead of 1px
"numberfield-1014-bodyEl" -> additional class "x-form-trigger-wrap-focus"
"numberfield-1014-inputEl" -> additional classes "x-form-focus x-field-form-focus x-field-default-form-focus"
Thinking more about this.... CSSs could accidentally change the formatting of the input field (based on element classes and a lot of other element features). But how does it come that the classes of the wellformed and malformed elements are different? CSSs do not change class attributes, do they? Where could this difference come from?
I also checked the CSS rules. I could identify one rule in the wordpress twentyfourteen theme that makes the outer frame visible:
table,
th,
td {
border: 1px solid rgba(0, 0, 0, 0.1);
}
This is part of the reset section of the theme. When disabling it, the frame disappears.
Another rule is this one:
.entry-content td,
.comment-content td {
padding: 8px;
}
It prevents the input field from showing correctly. After disabling this only the vertical positions of all items in the bar must be fixed to make the bar look correctly.
Any idea what the root cause of these effects is?

I did not find a satisfying solution. Also the manufacturer of ExtJS (Sencha) could not give me a solution. It seems currently the only way to safely embed ExtJS content without CSS collisions is to use an iframe. I read about similar problems using other JS frameworks too so I suppose this generally is a problem.

ExtJS make grid to be 100% height

i found 2 similar questions here, but they are not helped me, my code is:
var grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
// if set this to any numeric value, then everything works just good, but
// i was hoping that `ExtJS` already can detect browser window height, am i wrong ?
height: '100%',
title: 'Products',
store: store,
itemId: 'product_grid',
columns: [.. columns skipped ...],
plugins: [ rowEditing ],
dockedItems: [ ..addRow button here..]
});
var panel = Ext.create('Ext.panel.Panel', {
autoScroll: true,
items: [
{
xtype: 'productGrid'
}
]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: panel
});
What i need i scrollable grid filling whole browser window, but grid here does not expand
in height, so if grid has 0 rows, then it has 0 height and when i push "Add row", then
added row looks obscured by scrollbars and this looks ugly.
Also when grid contain more rows than could fit in browser window, then page scrollbar appears (not grid's scrollbar!) and this scrolls whole page so button bar scrolled away, which is also undesirable and ugly.
Any ideas what is wrong with my setup.
UPDATE:
Finally fixed it, intermediate panel should also contain layout: 'fit'

There's a couple things you can do here. First, use the fit layout on your Viewport as it will force its child component to fill the available space. Second, grids are panels. You don't need to nest a grid in a panel, and probably shouldn't.
The autoScroll config doesn't work on grids. Scrolling in both directions is enabled by default, but if you need to change it use the scroll property. Lastly, the height config only takes a number and doesn't work with strings or percentages. If you specify a height, it overrides any height given by the layout manager and you don't need it for fit layouts.
var grid = Ext.create('Ext.grid.Panel', {
title: 'Products',
store: store,
itemId: 'product_grid',
columns: [/* ... */],
plugins: [rowEditing],
dockedItems: [/* ... */]
});
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [grid]
});

Adding a viewConfig to the grid, strangely enough, solved my problem of gridpanel having no explicit height in floating window with vbox layout, containing just a form and a grid.
xtype: 'gridpanel',
store: 'DCLocations',
columnLines: true,
autoScroll : true,
viewConfig : {
emptyText : i18n.message.noresultstodisplay,
},

Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained inside some non-ExtJS-generated HTML?

I want to include an ExtJS GridPanel inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control.
From my experiments, it appears that the GridPanel only resizes itself correctly if it's within a Viewport. For instance, with this code the GridPanel automatically resizes:
new Ext.Viewport(
{
layout: 'anchor',
items: [
{
xtype: 'panel',
title: 'foo',
layout: 'fit', items: [
{
xtype: 'grid',
// define the grid here...
but if I replace the first three lines with the lines below, it doesn't:
new Ext.Panel(
{
layout: 'anchor',
renderTo: 'RenderUntoThisDiv',
The trouble is, Viewport always renders directly to the body of the HTML document, and I need to render within a particular div.
If there is a way to get the GridPanel to resize itself correctly, despite not being contained in a ViewPort, that would be ideal. If not, if I could get the Viewport to render the elements within the div, I'd be fine with that. All of my ExtJS objects can be contained within the same div.
Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?

To resize Ext JS components when they are not in a Viewport, you need to pass along browser window resize events.
Ext.EventManager.onWindowResize(panel.doLayout, panel);
In your example, store the Panel into var panel, and then set up the event handler after the var declaration but still inside of Ext.onReady.
Here is a full single page solution:
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo: 'areaDiv',
layout: 'fit',
items: [{
height: 200,
title: 'foo',
xtype: 'grid',
cm: new Ext.grid.ColumnModel([
{header: "id", width: 400},
{header: "name", width: 400}
]),
store: new Ext.data.ArrayStore({
fields: ['id','name'],
data: [[1,'Alice'],[2,'Bill'],[3,'Carly']]
})
}]
});
//pass along browser window resize events to the panel
Ext.EventManager.onWindowResize(panel.doLayout, panel);
});
</script>
</head>
<body>
header
<div id="areaDiv" style="padding:30px;"></div>
footer
</body>
</html>
Note that I've removed the redundant panel (a GridPanel is a Panel, so no need to wrap it), and used layout fit instead of anchor. Layout fit is actually the key to a fluid layout. Make the browser smaller, then bigger. You'll see the grid always fills the entire width, with the exception of the padding.

I don't have enough reputation to "comment anywhere" yet, but I do have a fix to the "not working when window is resized smaller" problem described by HOCA. I was having the same problem too, using the solution outlined by this answer. After Googling around for a while, I found this thread on the sencha.com website. Using a similar technique to the one described there seems to work better cross-browser (using the exact solution offered there seems to work somewhat differently between FF/IE).
Ext.EventManager.onWindowResize(function() {
// pass "true" to get the contendWidth (excluding border/padding/etc.)
mainPanel.setWidth(Ext.getBody().getWidth(true));
// seems to be no need to call mainPanel.doLayout() here in my situation
});

In IE6 and Chrome your solution doesn't seem to work when the browser window is resized/made smaller that the original size. It does, however, resize properly when the browser window is resized larger. Does the Ext.EventManager.onWindowResize(panel.doLayout, panel) not fire when the browser window is made smaller?

I solved it by setting the layout: 'fit' to the panel that contains the grid
var myGridTab = new Ext.Panel({
layout: 'border',
region: 'center',
autoScroll: true,
animCollapse: false,
forceFit: true,
title: ' My Grid Tab ',
split: true,
border: false,
items: [
{
region: 'center',
**layout: 'fit',**
autoScroll: true,
items: [myGrid],
height: 150,
forceFit: true
}]
});

ExtJs IE rendering issue

Below is a simple ext js code that i can't get to work correctly in IE (works fine in Firefox, and Chrome). The problem is that while it initially renders correctly , its messed up if i try resizing the 'west' panel. Can someone please point out the issue
var viewport = new Ext.Viewport({
layout: "border",
items: [{
xtype: "panel",
region: "west",
frame: true,
collapsible: true,
width: 200,
baseCls: 'x-plain',
collapseMode:'mini',
split:true,
items:[{
xtype:"panel",
collapsible:true,
titleCollapse:true,
title:'Test1',
height: 200,
frame: true,
border:true
}]
}, {
xtype: "panel",
region:"center"
}]
})

Any container that contains other panels or components usually requires a layout to work correctly. Try adding layout:'fit' to the west panel and see if that helps. Looking at your code though, I'm not sure why you would need a nested panel there (unless this is just test code). The west panel should simply contain whatever content you are planning on putting into the nested panel. If the goal is to add multiple child panels to west, then you would give west a layout like 'border' or whatever makes sense.

Maybe ExtJS forum can help you?

For a short hint you may try to answer the question:
What is layout of 'center' region?
With border layout I can see only one region, and it called 'west'. This shouldn't work as expected.