I have a requirement, in a grid panel we have 3 columns. "Name", "Age" and "Height".
So if an User will doubleclick on any cell under "Name" column then it will redirect to a new window.
`
{
xtype : 'gridpanel',
region: 'center',
height : 400,
title : 'Search Results',
id : 'searchResultsGrid',`
I know we have to use "celldblclick event, but not sure how to use it. I am using extjs version 5
This is the reference for celldblclick in extjs 5 document.
http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Table-event-celldblclick
Like that
Ext.application({
name: 'Fiddle',
launch: 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": "homer#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
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(),
listeners: {
celldblclick: function(ctx, td, cellIndex, record, tr, rowIndex, e, eOpts) {
alert('You have clicked cell in the ' + cellIndex + ' column and ' + rowIndex + ' row')
}
}
});
}
});
https://fiddle.sencha.com/#fiddle/dbl
Related
I am trying to create a tooltip for cells. Below code does that, but tooltip appears only onClick(in mozilla) and in IE tooltip appears on mouseOver but display value of last clicked cell.
I wanted a tooltip on grid in mouseOver with cells content as tooltip display value.
Please suggest any other way to achieve that. Thanks in advance.
var grid = Ext.getCmp('your_grid_id'); // Enter your grid id
initToolTip(grid); // call function
initToolTip: function(grid) {
var view = grid.view;
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);
tip.update(columnText);
}
}
}
});
You could use renderer config for gridcolumn and inside of renderer you could return a html tag with you data-qtip based on your record what you need to show.
You can check here with working FIDDLE.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: 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": "homer#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: 'simpsonsStore',
columns: [{
text: 'Name',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
return `<span data-qtip="This is ${value}"> ${value} </span>`;
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
renderTo: Ext.getBody()
});
}
});
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.
I'm creating a grid using Ext JS. I need to increase the height of the grid panel automatically with the increase of the number of rows in the grid. Which property of Ext JS grid can be set to implement this?
Just don't specify a value to the height property, and that's all.
Try it here: https://fiddle.sencha.com/#fiddle/bnl
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'
}
}
});
// Don't specify the height when creating the grid
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
width: 400,
renderTo: Ext.getBody()
});
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!
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