I am trying to use templatecolumn in EXTJS modern toolkit. I cannot figure out why Ext.XTemplate doesn't work in modern toolkit, because the syntax is not different than that for classic toolkit.
Code
var store = Ext.create('Ext.data.Store', {
fields: ['name'],
data: [{
'name': 'Bart',
}, {
'name': 'Lisa',
}, {
'name': 'Homer',
}, {
'name': 'Marge',
}]
});
Ext.create({
xtype: 'grid',
height: 500,
renderTo: Ext.getBody(),
store: store,
columns: [
{text: 'Name', dataIndex:'name'},
{
text: 'Name Styled',
xtype: 'templatecolumn',
tpl: new Ext.XTemplate(
'<div class="myClass">{name}</div>',
),
},
],
});
CSS
.myClass {
font-size: 16px;
color: red;
}
And for classic toolkit, it renders well:
but, for modern toolkit, it displays full html text, instead to apply class:
Just set encodeHtml to false in cell config:
var store = Ext.create('Ext.data.Store', {
fields: ['name'],
data: [{
'name': 'Bart',
}, {
'name': 'Lisa',
}, {
'name': 'Homer',
}, {
'name': 'Marge',
}]
});
Ext.create({
xtype: 'grid',
height: 500,
renderTo: Ext.getBody(),
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Name Styled',
// disable enocde in cell
cell: {
encodeHtml: false
},
// ----
tpl: new Ext.XTemplate('<div class="myClass">{name}</div>'),
}, ],
});
Related
I am wondering if someone know how to animate the expand effect of a rowbody in a gridpanel configured with the rowexpander plugin. I am looking for something like the expand/collapse panel effect. Thanks in advance.
{
ptype: 'rowexpander',
pluginId: 'rowExpanderPlugin',
selectRowOnExpand: true,
rowBodyTpl: new Ext.XTemplate(
'<div class="warning-notice" style="margin: 15px 10px 10px 10px; background-color: gold;"><div class="title">{asunto}</div>{[this.parseMensaje(values.mensaje, values.numero_expediente, values.id_expediente)]}</div>',
{
parseMensaje: function (v, num, idExpediente) {
return v.replace(num, Ext.String.format('{1} <i class="fa fa-external-link" aria-hidden="true"></i>', idExpediente, num));
}
}
)
}
Kindly check this example ExtJS Fiddle
, you can see the + and - sign which expand and collapse the panel
Ext.application({
name: 'Fiddle',
launch: function () {
let store = 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: 'Grid',
renderTo: Ext.getBody(),
width: 600,
height: 400,
store: store,
plugins: {
ptype: 'rowexpander',
pluginId: 'rowExpanderPlugin',
selectRowOnExpand: true,
rowBodyTpl: new Ext.XTemplate(
'Name is {name}'
)
},
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}]
});
}
});
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 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.
The Ext.grid.plugin.DragDropView and Ext.tree.plugin.TreeViewDragDropView are great to allow drag'n'drop functionnality over those components but I don't want the store modification thing when I drag and drop an item.
I want custom functions, like, when I drop an item on my grid, I don't want the drag component source store to be modified and I don't want the drop component store to be modified too. I would like a function of mine to be called instead.
How to do this?
Do I need to use DragZone and DropZone instead?
You are on the right path, and looking in the right areas. The plugins that you have mentioned are exactly what you need for this purpose and provide the DragZone and DropZone functionality within.
I have written a simple example of using these plugins together, Fiddle Here.
The thing to watch out for here... If you do not want the default functionality of moving a record between stores you will likely need to run your own logic in the beforeDrop event and call the cancelDrop method, to prevent default behaviour, this is demonstrated in the fiddle and code below.
Make sure that both plugins share the same ddGroup.
Ext.application({
name: 'Fiddle',
launch: function() {
// create a very simple tree view
var treeStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention",
leaf: true
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true
}, {
text: "algebra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
var gridStore = 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.panel.Panel', {
renderTo: Ext.getBody(),
layout: 'fit',
height: 800,
width: 800,
items: [{
layout: 'border',
title: "DnD",
height: '100%',
items: [{
xtype: 'grid',
region: 'center',
store: gridStore,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
enableDrag: false,
enableDrop: true,
ddGroup: 'myDropGroup'
},
listeners: {
beforedrop: function(node, data, overModel, dropPosition, dropHandlers) {
// Defer the handling
dropHandlers.wait = true;
// here you have the record from the treeview and can do anything you like with it.
var record = data.records[0];
Ext.MessageBox.confirm('Drop', 'Your are about to drop ' + record.get('text') + ', Are you sure?', function(btn) {
if (btn === 'yes') {
dropHandlers.processDrop();
} else {
// IMPORTANT - In this case, we want to cancel the drop as the records aren't compatible
dropHandlers.cancelDrop();
}
});
}
}
}
}, {
xtype: 'treepanel',
width: '40%',
region: 'west',
store: treeStore,
rootVisible: false,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
enableDrop: false,
ddGroup: 'myDropGroup'
}
}
}]
}]
});
}
});
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