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()
});
Related
I have an editor comboBox in Grid and it only shows when I click row. How to keep it permanent visible in grid? Thanks
How to keep it permanent visible in grid?
If you are using ExtJS version 5.x or higher then you can use widgetcolumn
A widget column is configured with a widget config object which specifies an xtype to indicate which type of Widget or Component belongs in the cells of this column.
I have created an sencha fiddle demo hope this will help you to solve problem or achieve your requirement.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', {
name: 'checked',
defaultValue: 'AL'
}],
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'
}]
}),
states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
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'
}, {
text: 'State',
width: 150,
xtype: 'widgetcolumn',
dataIndex: 'checked',
widget: {
xtype: 'combobox',
flex: 1,
emptyText: 'Select State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
store: states,
listeners: {
select: function (combo, record) {
Ext.Msg.alert('Success', 'Good you have selected <b>' + record.get('name') + '</b>')
var grid = combo.up('grid'),
index = grid.getView().indexOf(combo.el.up('table')),
record = grid.getStore().getAt(index);
console.log(record.getData());
}
}
}
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
I have a grid with checkbox model. I want to select grid only when I clicked in checkbox, right now it getting select even after clicking on cell or row. I tried checkOnly: true, but it didn't work.
Thanks for help.
This is working in EXTJS 4 all version.
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ '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',
selType: 'checkboxmodel', // This for checkbox Model
selModel: {
enableKeyNav: false,
pruneRemoved: false,
checkOnly: true // This for select only checkbox is clicked
},
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()
});
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 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
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