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
Related
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
I am developing a web application in ExtJS. The application is a grid where some of the grid`s rows can be expanded to show supplementary information as a nested grid. And user can edit rows in parent grid.
But I have problems with it. The nested grid is normally rendered , but when I want to update one of the field nested grid disappear.
There is testing version of my application and some screenshots.
The Code ( below you can find screens)
Ext.onReady(function() {
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',
plugins: [{
ptype: 'rowexpander',
pluginId: 'courseListGridExpander',
expandOnDblClick: false,
selectRowOnExpand: false,
enableCaching: false,
rowBodyTpl: ['']
},
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 2,
autoCancel: false
})
],
viewConfig: {
listeners: {
expandbody: function(rowNode, record, expandbody) {
var targetId = 'SessionInstructionGridRow';
if (Ext.getCmp(targetId + "_grid") == null) {
var sessionInstructionGrid = Ext.create('Ext.grid.Panel', {
renderTo: targetId,
id: targetId + "_grid",
title: 'Nested One',
columns: [{
header: 'Halo',
flex: 1
},
{
header: 'Halo 2',
flex: 1
}
]
});
rowNode.grid = sessionInstructionGrid;
sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, {
ClientSessionId: record.get('ClientSessionId')
});
}
},
celldblclick: function(gr, td, cellIndex, record) {
//alert("###");
}
}
},
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
allowBlank: false
}
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone'
}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: 'Hello',
handler: function() {
}
})
});
I would give the ComponentRowExpander plugin a try. It's intended to insert any component in a rowexpander - so it should work with a grid, too.
Given a gridpanel with some rows inside, if I click on 'Load more data' button at the bottom of the page, I would like to have it resized based on the height of the rows inside (including new ones). I want to get rid of the scrollbar and instead enlarge the gridpanel to show all rows at once. How can I do that?
Here is a fiddle for your convenience.
And here is the code:
Ext.onReady(function() {
Ext.create('Ext.data.Store', {
storeId: 'addressBook',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Pete',
"email": "pete#abc.com",
"phone": "555-111-1224"
}, {
'name': 'Mark',
"email": "mark#abc.com",
"phone": "555-222-1234"
}, {
'name': 'Luke',
"email": "luke#abc.com",
"phone": "555-222-1244"
}, {
'name': 'Monica',
"email": "monica#abc.com",
"phone": "555-222-1254"
}, {
'name': 'Louis',
"email": "louis#abc.com",
"phone": "555-222-3333"
}, {
'name': 'Mary',
"email": "mary#abc.com",
"phone": "555-222-4444"
}, {
'name': 'Johann',
"email": "johann#abc.com",
"phone": "555-222-5555"
}, {
'name': 'Toby',
"email": "toby#abc.com",
"phone": "555-222-6666"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Address Book',
store: Ext.data.StoreManager.lookup('addressBook'),
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Phone',
dataIndex: 'phone'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
text: 'Load more data',
handler: function () {
var store = Ext.data.StoreManager.lookup('addressBook');
store.loadData([{
'name': 'Prince',
"email": "prince#abc.com",
"phone": "555-222-7777"
}, {
'name': 'Michael',
"email": "michael#abc.com",
"phone": "555-222-8888"
}], true);
}
}]
}],
height: 250,
width: 400,
renderTo: Ext.getBody()
});
});
Well, it turned out to be pretty simple, I just need to remove the initial height definition.
height: 250, // Remove this. That's it!
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
To filter one grid column I use:
store.filter({
property: 'first_name',
anyMatch: true,
value : this.getValue()
});
Now I need to search multiple fields at once, something like:
var filters = [
new Ext.util.Filter({
property: "first_name", anyMatch: true, value: this.getValue()
}),
new Ext.util.Filter({
property: "last_name", anyMatch: true, value: this.getValue()
})
];
store.filter(filters);
The weird thing is that in both cases, only single search works
this didn't help How to filter multiple extjs grid columns?
Based on the way you implement the Filter I guess you are using remoteSort: false As hint: You don't need to create a instance of the filter, just provide the configuration. If possible spare this. Most events provide a instance of the component, use it instead of this. It can save you headache.
I tested it and it works. Here's a simple example:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Lisam', "email":"lisa#simpsons.com", "phone":"555-222-1234" },
{ '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',
tbar: [{
text: 'filter',
handler: function(btn) {
var g = btn.up('grid');
g.store.filter([{property: "name", anyMatch: true, value: 'Lisa'},{property: "email", anyMatch: true, value: 'lisa#simpsons.com'}])
}
}],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Here is a JSFiddle
Version 2 with textfield
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Lisam', "email":"lisa#simpsons.com", "phone":"555-222-1234" },
{ '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',
tbar: [{
xtype: 'textfield',
emptyText: 'filter',
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
var g = field.up('grid'),
value = field.getValue();
g.store.filter({scope: this, filterFn: function(rec) {
var rege = new RegExp(".*" + value + ".*");
if (rege.test(rec.data.name) || rege.test(rec.data.email)) {
return true;
}
return false;
}
});
}
}
}
}],
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
And the JSFiddle