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
},
Related
I need to have fixed table body height to firstly show up on my whole page nicely and secondly to not change height when I choose filters and filter tags are added to header.
I have real trouble finding solution. My best guess I should overwrite MUIDataTable.responsiveScroll class but it does nothing when I change minHeight:'80vh' for exmple.
Yes, you need to override the MUIDataTable.responsiveScroll. This is what I did for expanding to full size of page
createMuiTheme({
overrides: {
MUIDataTable: {
responsiveScroll: {
maxHeight: 'none',
},
},
},
});
You can add other styles there if you want a minimum height.
I am only a month old with extjs and still experimenting. My question is: I have a grid panel and within it the 'tools' config options. I am using this to enable/disable a Ext.grid.feature.Grouping variable. The 2 handler functions have the logic to disable/enable the 2 views by clicking on the 2 'cross' buttons that appear on the right side of the header. The logic is fine. However, I would like to display my set of custom images in place of the 'cross' buttons. Can this be done? If yes, how? Do I need to make some changes in the css code for that?
I have looked into the documentation and also done a good search but nothing seems to answer my question.
Specify a custom type config on your tools:
Ext.create('Ext.grid.Panel', {
...
tools: [
{
type: 'enable-grouping',
handler: function() {
...
}
},
{
type: 'disable-grouping',
handler: function() {
...
}
}
]
});
Then define the following classes in a stylesheet to style your new tools:
.x-tool-enable-grouping {
background-image: url('path/to/tool/image/enable-grouping.png');
}
.x-tool-disable-grouping {
background-image: url('path/to/tool/image/disable-grouping.png');
}
The size of a tool image should be 15 x 15 px
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.
can somebody help me with how to extend extjs components using extjs version 4. I am looking for a proper syntax for the same. please help..!!
Following is an example code of extending textfield in ExtJS 4.
Other then using the existing configs and methods, this extended component also has a new config property created and a new method created & associated with an event.
The purpose of component is simple that it displays the label in red color if the value is mandatory, modifies the background color of the field if its readOnly and also changes the background color of the field when focussed.
The code is properly commented. Hope it helps.
Ext.define('Ext.pnc.Textfield', {
extend: 'Ext.form.field.Text',//Extending the TextField
alias: 'widget.pnctextfield',//Defining the xtype
config:{
focusCls:'focusClassFieldPnC',//Providing value for existing config property.
testConfig:'testConfigValue'//Creating a new config. Accessor functions will be created for this one by ExtJS engine
},
constructor:function(cnfg){
this.callParent(arguments);//Calling the parent class constructor
this.initConfig(cnfg);//Initializing the component
this.on('beforerender',this.beforeRender);//Associating a new defined method with an event
},
//Defining a method below and associating this with an event in the constructor above
beforeRender:function(){
if(!this.allowBlank){
this.labelStyle = 'color:#FF0000';
}
if(this.readOnly){
this.fieldCls = 'readOnlyClass';
}
},
//Over-riding a function which already exists in parent class. Note that this has not been associated with any event in constructor as it already defined in parent class
afterRender:function(){
console.log('after render function');
this.callParent();//Calling the parent class method. This can be omitted if not required and is not a must
}
});
.readOnlyClass{
background:#FF0000 !important
}
.focusClassFieldPnC{
background:#00ff00 !important
}
Ext.define('myApp.Grid', {
extend: 'Ext.Grid',
alias: 'widget.mygrid'
....
....
}
now you can use xtype:'mygrid'
Ext.define('BS.view.MyGrid' , {
extend: 'Ext.grid.Panel',
alias: 'widget.my-grid',
// Non-complex config types (booleans, integers, strings) go here
width: 1000,
autoHeight: true
initComponent: function() {
Ext.apply(this, {
// complex configs (objects / arrays) go here
columns: colModel,
});
this.callParent(arguments);
}
});
why not see the src of extjs4's components such as Grid,Table ...
and here are docs:
http://docs.sencha.com/ext-js/4-0/#/guide/components <== important
http://docs.sencha.com/ext-js/4-0/#/guide/class_system
Ext.define('My.custom.Component', {
extend: 'Ext.Component'
});