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."
Related
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
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
I have a certain view where I want to post text so I need the height of the row cells to be bigger than the default. I look up the documentation of ExtJS 4.0 and come up with this:
Ext.define('APP.view.CalendarEventsGrid', {
//extend: 'Ext.grid.Panel',//this is the default which is working
Ext.create('Ext.grid.Panel',{
viewConfig: {
height: 50
}
}),
id: 'CalendarEvent',
requires: [
'Ext.data.*',
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem',
],
initComponent: function(){...
But this don't do the trick. So could anyone help me with a way to change the height of the row in this exact view?
i am not sure what is your exact problem but i assume that you want to pass height: 50 in the viewConfig config option of Ext.grid.Panel
every config of the parent class can be passed through the child class so you don't need to instantiate parent class to specify config options (and actually what you tried in the question is not possible at all :))
Ext.define('SYMADM.view.CalendarEventsGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
height: 50
},
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.