How can I set the height of a grid to fit it's content?
See this fiddle here, the first grid has a height: 200, that is ok. The second has no height and I would like to make the height to fit the grid content. Grid Header and Column headers are displayed, but the grid rows not.
https://fiddle.sencha.com/#view/editor&fiddle/385b
You can use layout: 'vbox' and flex: 1 in the second grid. Something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
defaults: {
style: 'border: 1px solid grey;' // To see the borders
},
items: [{
title: 'Simpsons - height: 200',
xtype: 'grid',
height: 200,
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
}, {
title: 'Simpsons - autofit?',
xtype: 'grid',
flex: 1,
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
}, {
xtype: 'container',
html: "Some other content"
}]
})
}
});
The solution is to specify one of these 2:
maxHeight property for the grid
OR
set infinite to false.
//maxHeight: 800,
infinite: false,
https://fiddle.sencha.com/#fiddle/386n
Related
I have some problems with the rowwidget
I have a rowwidget plugin inside the rowwidget to display nested tables.
It looks like the picture(1). But there is a problem when I expand the record of the second level.
The height of the parent row is not set correctly and the records are not visible (picture 2).
Does anyone know how to make the height of the row automatically recalculated by the size of the expand row?
picture(1)
picture(2)
My code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'A',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
orders: [{
item: 'A11',
desc: 'Stand',
orde: [{
item: 'A111',
desc: 'Stand',
}, {
item: 'A222',
desc: 'Holder'
}, {
item: 'A333',
desc: 'Hanger'
}]
}, {
item: 'A22',
desc: 'Holder',
orde: [{
item: 'A222',
desc: 'Stand',
}, {
item: 'A333',
desc: 'Holder'
}, {
item: 'A444',
desc: 'Hanger'
}]
}, {
item: 'A33',
desc: 'Hanger',
orde: [{
item: 'A333',
desc: 'Stand',
}, {
item: 'A444',
desc: 'Holder'
}, {
item: 'A555',
desc: 'Hanger'
}]
}]
} ]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1
}],
height: Ext.getBody().getHeight(),
width: '100%',
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
maxHeight: 300,
title: false,
bind: {
store: '{record.orders}',
},
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
maxHeight: 200,
title: false,
bind: {
store: '{record.orde}',
},
columns: [{
text: 'Item',
dataIndex: 'item',
flex: 1
}, {
text: 'Description',
dataIndex: 'desc',
flex: 2
}]
}
}],
columns: [{
text: 'Item',
dataIndex: 'item',
flex: 1
}, {
text: 'Description',
dataIndex: 'desc',
flex: 2
}]
}
}],
renderTo: Ext.getBody()
});
}
});
I solved my problem with manageHeight: false
How do I databind my extjs6 grid to include "commission" using the following format I created from webapi ef?
grid columns should look like this.
title: 'Commissions',
xtype: 'grid',
bind: {
store: '{myAccountDetails.commission}'
},
ui: 'featuredpanel-framed',
cls: 'custom-grid',
margin: '0 0 0 0',
itemId: 'gridCommId',
collapsible: true,
columns: [
{
header: 'USD',
dataIndex: 'usd',
flex: 1
},
{
header: 'AUD',
dataIndex: 'aud',
flex: 1
},
{
header: 'CAD',
dataIndex: 'cad',
flex: 1
}
This is my view of grid
the screenshot I attached is myAccountDetails
any help would be greatly appreciated!
just a sidenote... if I add a label I am able to return the info I am looking for but I want it to be inside a grid.
xtype: 'label',
cls: 'myLabelCRM2',
bind: {
text: '{myAccountDetails.commission.aud}'
}
Best approach is to define a store in viewmodel, and bind it's data field directly to the details commision field using the mustache syntax.
Ext.define('MyView', {
viewModel: {
data: {
myAccountDetails: {
accountName: 'foo',
commision: {
aud: 7,
cad: 8,
usd: 9
}
}
},
stores: {
commisionStore: {
fields: ['aud', 'cad', 'usd'],
data: '{myAccountDetails.commision}'
}
}
},
extend: 'Ext.grid.Panel',
xtype: 'MyView',
bind: {
store: '{commisionStore}'
},
columns: [{
header: 'USD',
dataIndex: 'usd',
flex: 1
}, {
header: 'AUD',
dataIndex: 'aud',
flex: 1
}, {
header: 'CAD',
dataIndex: 'cad',
flex: 1
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'MyView',
width: 300,
height: 300,
renderTo: Ext.getBody()
});
}
});
I am using Extjs 4.2
Here is the code that i am working on it
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
"name": "Lisa",
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
"name": "Bart",
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
"name": "Homer",
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
"name": "Marge",
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [ {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
selectOnFocus: true,
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Phone',
dataIndex: 'phone'
},{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}],
selModel: {},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 900,
renderTo: Ext.getBody()
});
specifically in ie 11, when i click on the name it jumps to first column.
Waiting for help. Thank you. Goog Luck
It seems that the issue is fixed in the 4.2.2 Release.
4.2.1
https://fiddle.sencha.com/#fiddle/pga
4.2.2
https://fiddle.sencha.com/#fiddle/pgc
The ExtJS RowEditing plugin does not seem to handle textarea inputs unless they are squashed to the height of the row, which renders them unusable.
Demo here http://jsfiddle.net/8SA34/
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
"name": "Lisa",
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
"name": "Bart",
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
"name": "Homer",
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
"name": "Marge",
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textarea',
allowBlank: false,
height:100
}
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textarea',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
Is there a config fix for this, or an existing plugin?
Failing that, what's the best approach to create a textarea that spills out of the row on focus?
Extend textarea?
Extend RowEditing plugin?
CSS?
You can do that simply with CSS:
.x-grid-row-editor .x-panel-body{
height: 68px !important;
}
.x-grid-editor .x-form-text,
.x-panel-body .x-box-inner{
height: 60px !important;
}
.x-grid-row-editor-buttons-default-bottom{
top: 69px !important;
}
.x-grid-row-editor-buttons-default-top{
bottom: 69px !important;
}
Now you can paste text in the field which has more than a single row, but if you want wrap by enter, then you have to overwrite the onEnterKey method.
http://jsfiddle.net/8SA34/9/
I am using ExtJs 4.1 and trying to add items to panel and columns to grid dynamically.
My Requirement
MainPanel (Ext.panel.Panel) has 2 child items:
DynamicPanel (Ext.panel.Panel)
I want to add this panel to the main panel dynamically.
Then... I want to add items to DynamicPanel dynamically, the items are a config of the MainPanel called : "elements"
DynamicGrid (Ext.grid.Panel)
I want to again, add this to the main panel dynamically.
I want to add columns to DynamicGrid dynamically, and again these columns are part of the MainPanel config gridcolumns.
I am getting the below error:
this.dpanel is undefined
[Break On This Error] this.dpanel.add(this.elements)
My code is as below:
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'date', 'time'],
data: {
'items': [{
"name": "Lisa",
"email": "[EMAIL="
lisa#simpsons.com "]lisa#simpsons.com[/EMAIL]",
"phone": "555-111-1224",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Bart",
"email": "[EMAIL="
bart#simpsons.com "]bart#simpsons.com[/EMAIL]",
"phone": "555-222-1234",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Homer",
"email": "[EMAIL="
home#simpsons.com "]home#simpsons.com[/EMAIL]",
"phone": "555-222-1244",
"date": "12/21/2012",
"time": "12:22:33"
}, {
"name": "Marge",
"email": "[EMAIL="
marge#simpsons.com "]marge#simpsons.com[/EMAIL]",
"phone": "555-222-1254",
"date": "12/21/2012",
"time": "12:22:33"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.define('DynamicGridPanel', {
extends: 'Ext.grid.Panel',
alias: 'widget.dynamicGridPanel',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 200
});
Ext.define('DynamicPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dynamicPanel',
title: 'DynamicAdd',
width: 200,
height: 200
});
Ext.define('MainPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dynamicMainPanel',
title: 'MainPanel',
renderTo: Ext.getBody(),
width: 600,
height: 600,
constructor: function (config) {
var me = this;
me.callParent(arguments);
me.dpanel = Ext.create('DynamicPanel');
me.dgridpanel = Ext.create('DynamicGridPanel');
me.items = [this.dpanel, this.dgridpanel];
}, //eo constructor
onRender: function () {
var me = this;
me.callParent(arguments);
//I am getting error at the below lines saying the dpanel and dynamicGridPanel undefined
me.dpanel.add(this.elements);
me.dynamicGridPanel.columns.add(this.gridcolumns);
}
});
var panel1 = Ext.create('MainPanel', {
gridcolumns: [{
xtype: 'actioncolumn',
width: 42,
dataIndex: 'notes',
processEvent: function () {
return false;
}
}, {
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
xtype: 'gridcolumn',
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
xtype: 'gridcolumn',
header: 'Date',
dataIndex: 'date',
flex: 1,
editor: {
xtype: 'datetextfield',
allowBlank: false
}
}, {
xtype: 'gridcolumn',
header: 'Time',
dataIndex: 'time',
flex: 1,
editor: {
xtype: 'timetextfield',
allowBlank: false
}
}],
elements: [{
xtype: 'numberfield',
width: 70,
tabIndex: 1,
fieldLabel: 'Account No',
itemId: 'acctno',
labelAlign: 'top'
}, {
xtype: 'textfield',
itemId: 'lastname',
width: 90,
tabIndex: 2,
fieldLabel: 'Last Name',
labelAlign: 'top'
}, {
xtype: 'textfield',
itemId: 'firstname',
width: 100,
tabIndex: 3,
fieldLabel: 'First Name',
labelAlign: 'top'
}]
});
Create the child elements in initComponent:
initComponent: function() {
var me = this;
me.dpanel = Ext.create('DynamicPanel');
me.dgridpanel = Ext.create('DynamicGridPanel');
me.items = [this.dpanel, this.dgridpanel];
me.callParent(arguments);
}
Dont forget to define the require config for columns in your grid:
columns: []
Look at that Example here for adding dynamically columns in grid http://neiliscoding.blogspot.de/2011/09/extjs4-dynamically-add-columns.html