I'm using border layout in Extjs4.0. It was working fine there. When I upgrade my library to extjs4.1, its showing error like layout run failed, and the panel is not loading. I didn't came across such error, so help me to resolve this error.
My code is
Ext.define('TextFit', {
extend : 'Ext.container.Container',
title: 'Sample text',
layout: {
type : 'border'
},
items : [{
title : 'left panel',
region : 'west'
},{
title : 'Center panel',
region: 'center'
}]
});
Thanks in advance.
Try adding
layout: 'fit'
To your border layout's parent container. I had the same problem and this solved it for me.
From BorderLayout's documentation:
Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.
Similarly for north and south, but height instead of width.
i had this problem while trying to add a complex set of (deep nested) items to a panel before rendering the panel. Once i added the items after the panel knew it's dimensions, it worked:
addItems: function() {
this.on("boxready", function(){ this.add(items); }, this, {single: true});
}
Try to add flex property to both items ... so the modified code will be
....
items : [{
title : 'left panel',
region : 'west',
flex:1 //add here
},{
title : 'Center panel',
region: 'center',
flex:1 //and here
}]
......
You could try using:
<script type="text/javascript" src="extjs/src/diag/layout/Context.js"></script>
<script type="text/javascript" src="extjs/src/diag/layout/ContextItem.js"></script>
just put this in your index.html and check the console to see if there are any errors in there.
Don't mind most of the warnings you see.
If there are errors like: "... is still connected/attached" then look at that item and make sure it has a layout other than anchor.
If you don't have any errors in the console and there is still a layout issue, you could try using the page analyzer.
You should be able to find the analyser in your extjs zip.
If it is deployed on your server you could go to: http://< server-address >/extjs/examples/page-analyzer/page-analyzer.html
Related
I'm using extjs4 and I'm trying to create a tab panel, that each tab has a different grid that loads data from a store. (each grid different store)
I would like to load the particular store only when the user clicks on the respective tab.
I don't see how I can catch the user click on the panel.
How I can do that?
I had a similar performance loading issue and failed to solve it with deferredRender. You have to add the event activate for the tab you want to load when the tab is activated :
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'activate' : function(){
store2.load();
},
}
}
Worked fine for me even if it's a temporary solution. Extjs 4.1 should improve loading/rendering performances. We'll see.
You can activate the panel by placing setActiveItem() in tab handler.
Ok, I figured out, I just needed to have deferredRender=true and to add the respective store.load() on the beforerender event on every tab:
var lowerTabPanel = Ext.create('Ext.tab.Panel', {
deferredRender: true,
items: [
{
title: 'tab1',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store1.load();
},
}
},
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store2.load();
},
}
},
]
});
Ext.TabPanel has config option deferredRender. May be it helps you.
Documentation:
true by default to defer the rendering of child items to the browsers DOM until a tab is activated. false will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
Update: Also look at autoLoad config option in Ext.data.JsonStore, it should be false.
I have a dataview and when scrolling it vertically, after releasing thumb it automatically scrolls back to the top. Whereas with a list it would stay where you release the thumb.
Is this something inherent within a dataview component that cannot be avoided or is there some kind of configuration parameter I can tweak?
My current definition:
informationdataview = new Ext.DataView({
id: 'informationdataview',
itemSelector: 'div.thumb-wrap',
tpl: informationtpl,
autoHeight: true,
layout: 'fit',
store: myapp.stores.information,
scroll: 'vertical'
});
And it's the only item inside an Ext.Panel.
Thanks for any help.
Adding this code to my app.js file solved my similar problem:
Ext.define('Override.util.PaintMonitor', {
override: 'Ext.util.PaintMonitor',
constructor: function (config) {
return new Ext.util.paintmonitor.CssAnimation(config);
}});
Ext.define('Override.util.SizeMonitor', {
override: 'Ext.util.SizeMonitor',
constructor: function (config) {
var namespace = Ext.util.sizemonitor;
if (Ext.browser.is.Firefox) {
return new namespace.OverflowChange(config);
} else if (Ext.browser.is.WebKit || Ext.browser.is.IE11) {
return new namespace.Scroll(config);
} else {
return new namespace.Default(config);
}
}});
I had the same problem, which was fixed by putting the layout value for main Panel to hbox. This is already covered in a separate question, here.
I am sure that, there is scroll view configuration mistake. Refer here for a better solution.
UIScrollView Controller not scrolling fully
I am also faced same issue i got the solution. U have set snapboundary for dataview (i.e) set top and bottom as 0, and sibling component should be docked top if u have any. Important thing make height: 100% not in pixels
items: [{
xtype: 'selectfield',
docked: 'top'
}, {
xtype: 'dataview',
width: '100%',
bottom: 0,
top: 0,
}]
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.
I've only got so far trying to achieve what i've mocked in the screenshot.
Basically, i have a fullscreen reports panel that has 6 panels nested within it. Each of these panels (i'll call them tiles, as that makes more sense) need to be shown at the same time (used the layout:'fix') for the main panel.
Each tile will have a carousel within it that gets it's items populated by means of a single ajax call, if the ajax call returns 3 items then the carousel will have 3 items etc.
I'm having trouble getting the tiles arranged properly, so that they are all shown neatly, and more importantly in a way that will work when the device goes from landscape to portrait mode.
Without worrying about the carousel part too much, trying to get the tiles arranged properly within the panel is a pain. I can pretty much get there with css, by floating... but the first panel always looks messed up. I've since done some some reading trying to achieve a more "sencha" way of doing this.
var rep1 = new PortalDashboard.views.Reportimagetile;
var rep2 = new PortalDashboard.views.Reportimagetile;
var rep3 = new PortalDashboard.views.Reportsinglefigtile
var rep4 = new PortalDashboard.views.Reportimagetile;
var rep5 = new PortalDashboard.views.Reportimagetile;
var rep6 = new PortalDashboard.views.Reportimagetile;
PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
title: 'Dashboard',
html: '',
cls: 'card5',
layout: 'fit',
iconCls: 'team',
styleHtmlContent: true,
initComponent: function () {
Ext.apply(this, {
items: [
rep1, rep2, rep3, rep4, rep5, rep6]
});
PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('dashboardcard', PortalDashboard.views.Dashboardcard);
--
PortalDashboard.views.Reportsinglefigtile = Ext.extend(Ext.Panel, {
html: '',
cls: 'dashtilecontent',
initComponent: function () {
Ext.apply(this, {
html: '<h1>99.99%</h1>'
});
PortalDashboard.views.Reportsinglefigtile.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('reportimagetile', PortalDashboard.views.Reportsinglefigtile);
Fit layout is used to show a single item at a time so using it as the layout for your dashboard panel won't work. Besides writing a custom layout to achieve the 3x2 tile effect in your mock up I would set the layout of the dashboard to
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
}
so now any items you add will be in the center of the panel body and stack vertically.. so add 2 panels for each of the rows and on those panels use an hbox layout and add 3 cards to each of those panels
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
}
(those align or pack settings might not suit your needs if you plan to have different sizes on different boxes, in which case you'll need to use the flex property to give the boxes the proportions you want)
I am using Ext.grid.GridPanel in Extjs 4.
Autoscroll is not working in my GridPanel.
How can I resolve this?
Put below config in your parent container of GridPanel.
layout: 'fit'
And remove autoScroll from GridPanel.
scroll: true,
viewConfig: {
style: {
overflow: 'auto',
overflowX: 'hidden'
}
},
Try the above config option. This also will solve your problem.
If the parent container needs to use some other layout other than 'fit', as suggested by previous comments, you could try this: set the height of the grid once the store loads. Moreover, instead of having to calculate the actual height, this may do the trick:
grid.setHeight('100%')
According to documentation, setHeight can accept "A String used to set the CSS height style."