I have the panel here that displays fine until i try to implement the rowexpander plugin:
Ext.define('AM.view.userlist.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: '<center>Results</center>',
store: 'User',
collapsible: true,
plugins: [{
ptype: 'rowexpander',
id: 'rowexpander',
rowBodyTpl : [
'<p>Name <b>{name}</b></p>',
'<p><b>Address {address}</b></p>'
]
}],
collapsible: true,
animCollapse: false,
initComponent: function() {
this.columns = [
{header: 'ID', dataIndex: 'id', flex: 4, tdCls: 'grid_cell'},
{header: 'Name', dataIndex: 'name', flex: 4, tdCls: 'grid_cell'},
{header: 'Address', dataIndex: 'address', flex: 3, tdCls: 'grid_cell'},
{header: 'Phone', dataIndex: 'phone', flex: 3, tdCls: 'grid_cell'}
];
this.callParent(arguments);
//remaining code...
When i attempt to add the plugin, I get this exception:
TypeError: name is undefined
I'm not sure why I can't get it to work. Any ideas?
Try:
...
requires: [
'Path.to.RowExpander'
],
...
Related
How to customize errorSummary in Extjs? The default title for errorSummary is "Errors"(screenshot attached for reference), is there any way to change it to something else?
Image
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: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
errorSummary:true,
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
errorsText:'test',
errorSummary:true
})
],
If you want to change it globally,We can override the editing plugin by using below code.
Ext.define('OverridedRowEditing',{
override: 'Ext.grid.plugin.RowEditing',
config: {
errorsText: 'Test'
}
});
I have an issue with gridfilters plugin
« Filters » option is visible but the sub-menu for Filters option is not visible
I have this warning in console
"Using showBy on a non-floating component"
The grid definition is :
xtype: 'grid',
store: store,
iconCls: 'icon-grid',
frame: true,
width: 700,
height: 500,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // mismo que el store GridPanel
dock: 'bottom',
displayInfo: true
}],
plugins: ['gridfilters'],
columns: [
{header: 'Company',dataIndex: 'company', flex: 1,
filter:
{
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
}
},
editor: {
xtype: 'textfield'
}
},
{header: 'Price',dataIndex: 'price', flex: 1,
filter: 'number'
},
{header: 'Change',dataIndex: 'change', flex: 1},
{header: 'Last change',dataIndex: 'lastChange',xtype: 'datecolumn', format:'d/m/Y', flex: 1}
]
Can you help me about this point?
Try using the features property instead of the plugins one, as follows:
features: {
ftype: 'filters',
encode: true,
local: false
}
I have created a grid. I just want to know how to make it editable.Though I can find many examples over here.I am not being able to understand it as I am new to it. Can you please tell me in simple way?
You can use cell or rowedit functions in grid. The following examples show how you can do.
Cell Edit Sample
// Cell Edit example
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
/**
* here is the important part
* you should define each or single column 'editor' property
* then specify the 'plugins' that you want to use, here is 'CellEditing'
* as you might guess, all definitions appear in the grid definition
*/
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Row Edit Sample
// Row Edit Sample
// the difference with cell edit, just showing an editor screen to change something
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'),
/**
* Same aspect
* you should define 'editor' property
* if you don't define editor property for a colum,
* you can't change anyhthing for that column
*/
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'rowmodel',
// here is the plugin definition
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
I have tried just about everything to give this grid expandable rows. Here's my code:
Ext.define('AM.view.metadata.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.metadatalist',
title: '<center>Results</center>',
store: 'Metadata',
requires: ['Ext.*'],
collapsible: true,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'tbtext', text: 'Loading...', itemId: 'recordNumberItem' },
'->',
{ text: 'Print', itemId: 'print' },
'-',
{ text: 'Export', itemId: 'export' }
]
}],
initComponent: function() {
this.columns = [
{header: 'Technical Name', dataIndex: 'TECH_NAME', flex: 4, tdCls: 'grid_cell'},
{header: 'KBE ID', dataIndex: 'KBE_ID', flex: 2, tdCls: 'grid_cell'},
{header: 'KBE Name', dataIndex: 'KBE_NAME', flex: 3, tdCls: 'grid_cell'},
{header: 'View Name', dataIndex: 'VIEW_NAME', flex: 4, tdCls: 'grid_cell'},
{header: 'Database/Schema', dataIndex: 'DB_SCHEMA', flex: 3, tdCls: 'grid_cell'},
{header: 'Privacy', dataIndex: 'PRIVACY_INDICATOR', flex: 3, tdCls: 'grid_cell'}
];
this.callParent(arguments); //Calls the parent method of the current method in order to override
}
});
And here's where I instantiate it in my app.js
{ xtype: 'metadatalist', padding: '5px 5px 5px 5px', height: 430, width: '100%', hidden: true}
I have tried the rowexpander plugin, but I'm not sure if I put it in the right place. If anyone sees a red flag or can help me out with how to implement this rowexpander, I would greatly appreciate it. I've posted several times about this, and so far have received little to no help. I'm using Ext JS 4.1.1
Thank you!
You need to have the rowexpander plugin in the grid configuration and you need to create an XTemplate for the information presented when the row is expanded. Did you try and follow this example?
http://docs.sencha.com/extjs/4.2.1/#!/example/grid/grid-plugins.html
As it turned out, I needed to set my Loader path so that it could find RowExpander.js. Here's what I did:
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux'); // change this for your environment
Ext.require([ 'Ext.ux.RowExpander' ]);
I want to implement grid bufferrenderer in my simple grid panel that shows a list of information using ExtJS 4.2.1. Without using the bufferrenderer plugin, it shows all the data, but when i used this plugin, my grid contains no data.
This is my grid without using the plugin
This is my grid using the plugin
The grid panel's code is:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
itemId: 'myPanel',
title: '',
requires: ['Ext.grid.plugin.BufferedRenderer'],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
autoRender: true,
autoShow: true,
itemId: 'gridPanel',
title: 'My Grid Panel',
store: 'MyJsonStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'FirstName'
},
{
xtype: 'gridcolumn',
dataIndex: 'middleName',
text: 'MiddleName'
},
{
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName'
},
{
xtype: 'gridcolumn',
dataIndex: 'age',
text: 'Age'
},
{
xtype: 'gridcolumn',
dataIndex: 'country',
text: 'Country'
},
{
xtype: 'gridcolumn',
dataIndex: 'city',
text: 'City'
},
{
xtype: 'gridcolumn',
dataIndex: 'street',
text: 'Street'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobile',
text: 'Mobile'
},
{
xtype: 'gridcolumn',
dataIndex: 'phone',
text: 'Phone'
},
{
xtype: 'gridcolumn',
dataIndex: 'zip',
text: 'Zip'
}
],
plugins: 'bufferedrenderer'
/*plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 20,
leadingBufferZone: 25
}*/
}
]
});
me.callParent(arguments);
}
});
The Store's code is:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.GridModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.GridModel',
storeId: 'MyJsonStore',
buffered: true,
clearOnPageLoad: false,
clearRemovedOnLoad: false,
leadingBufferZone: 25,
pageSize: 500,
purgePageCount: 10,
trailingBufferZone: 20,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total_user'
}
}
}, cfg)]);
}
});
Can anyone help me with this? Thanks
Setting the height property in grid will fix this issue.
height: 300
Make sure that all panels up to the viewport have their layout set to “fit”. Also, region of the grid should be “center”.
I have not tested, but something like this should work:
var grid = Ext.create('MyApp.view.MyPanel', {
layout: 'fit',
region: 'center'
});
var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [
grid
]
});