I have a datastore and a grid. I am trying to declare a new column called FullName that would combine the two dataindexes. After spending some time researching this issue, I understand it could either be a renderer (grid level) or it could be a custom column in the datastore (mapping?).
Can someone provide a code sample that implements such a column?
// XML
<person>
<first_name>John</first_name>
<last_name>Smith</last_name>
</person>
// Store
Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'TestStore',
fields: ['first_name', 'last_name'],
data: parsed_xml_object,
proxy: {
type: 'memory',
reader: {
type: 'xml',
record: 'person'
}
}
});
// Grid
TestGrid = Ext.create('Ext.grid.Panel', {
title: 'Test',
store: Ext.data.StoreManager.lookup('TestStore'),
columns: [
{ header: 'First Name', dataIndex: 'first_name' },
{ header: 'Last Name Name', dataIndex: 'last_name' },
],
height: 200,
autowidth: true
});
Use a custom renderer:
{
header: "Name",
dataIndex: 'last_name',
renderer: function(value, element, record) {
return record.data['last_name'] + ', ' + record.data['first_name'];
}
}
you can use templeteColumn for it which is a Column definition class which renders a value by processing a Model's data using a configured XTemplate
http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Template
Related
friends!
I have a grid, with a widget column. I get the data for the store from the server.
I get different templates for each row and try to set these templates in my widget. However, I am not able to display the data in the templates.
Here is my example fiddle https://fiddle.sencha.com/#fiddle/3j41&view/editor
I expect the second column to display data with different templates. Instead of data I see {testName}.
In the third column everything works, but it's static data
Can you help me understand what's wrong?
My result:
My store:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'tplConfig'],
data: [{
name: 'Test 1',
tplConfig: {
tplBody: '<div><b>Name:</b> {testName}</div> <div>any text</div>',
tplData: {
testName: 'Alex'
}
}
} ]
});
My grid:
{
xtype: 'grid',
title: 'Widget Column Demo',
store: store,
columns: [
.....
{
xtype: 'widgetcolumn',
text: 'Dynamic',
width: 120,
dataIndex: 'tplConfig',
widget: {
xtype: 'component',
tpl: '{tplBody}',
//data: '{tplData}' //it's not working
}
}
.......
]
}
You can use renderer:
{
xtype: 'gridcolumn',
text: 'Dynamic',
width: 120,
dataIndex: 'tplConfig',
renderer: function(tplConfig) {
var t = new Ext.Template(tplConfig.tplBody);
return t.apply(tplConfig.tplData);
}
}
or as a 1 liner:
return new Ext.Template(tplConfig.tplBody).apply(tplConfig.tplData);
I'm trying to get value inserted from the interface in a text box rendered inside a GridPanel extjs 3.4, below how is defined the textbox inside the column model:
header: "Rosso",
dataIndex: "contrFilEsRosso",
width: 50,
renderer: function(val, meta,record){
var str0='<p align="left"><input type="text" name="verde" value="' + val + '
return str0;
}
I've modified from the interface the value inside the textbox and i want to send the modified value to the controller. Obviously the store has the value extracted from the backend and is not updated with the new value, so i tried the getView() method of the GridPanel but i haven't been able to get the new value of the textbox.
Thanks a lot.
Any data loaded into an ExtJs grid will be kept in a store, along with the edits.
There are a number of ways you can get the specific value but usually you will just want to send the data back to the server to update as needed.
You can access the store via the getStore() method on the grid and from there you can access any individual records by id or index.
Yo would be best using an EditorGrid and listening to events such as afterEdit
Something like this should work (might need some tweaking, not tested as on mobile)
Fiddle
Ext.application({
name: 'MyApp',
launch: function() {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: true
});
Ext.create("Ext.grid.EditorGridPanel", {
title: 'Simpsons',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
isCellEditable: function(col, row) {
return (col == 0);
},
listeners: {
afterEdit: function(e) {
alert("You changed " + e.field + " from " + e.originalValue + " to " + e.value);
}
},
height: 200,
width: 400,
});
}
});
I hope someone helps me out.
I want to load my grid with xml file's data, locally.
I created model,store and grid. I load the store in render event of grid.
The problem is,
Store is loaded but the grid is still empty. I looked at the grid at console, and grids items contains the loaded data, but grid doesnt contain the data on the screen.
Here is the model
Ext.define('BTOM.model.test.test', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'phone', type: 'string' }
]
});
Here is the store
Ext.define('BTOM.store.test.test', {
extend: 'Ext.data.Store',
model: 'BTOM.model.test.test',
autoLoad: false,
proxy: {
type: 'memory',
reader: {
type: 'xml',
root: 'users',
record: 'user'
}
}
});
And the grid
Ext.define('BTOM.view.test.test', {
extend: 'Ext.grid.Panel',
store: 'BTOM.store.test.test',
alias: 'widget.test',
title: 'Test',
initComponent: function () {
this.columns =
[
{ header: "Id", width: 120, dataIndex: 'id', sortable: false },
{ header: "Name", width: 180, dataIndex: 'name', sortable: false },
{ header: "Phone", width: 115, dataIndex: 'phone', sortable: false}
];
this.callParent(arguments);
},
});
And where I load the store is
render: function (grid, eOpts) {
var store = grid.getStore();
var data =
'<?xml version="1.0" encoding="utf-8"?>' +
'<users> ' +
'<user><id>1</id><name>Bll QASD</name><phone>333 2211</phone></user> ' +
'<user><id>2</id><name>Asd QWF</name><phone>444 2211</phone></user> ' +
'<user><id>3</id><name>Zas QWE</name><phone>555 2211</phone></user> ' +
'</users>';
var dataXml = (new DOMParser()).parseFromString(data, 'text/xml');
console.log(dataXml);
store.loadRawData(dataXml, true);
console.log(grid);
}
dataXML document is created without problem.
grid seems to contain the data (by firebug, I can see)
but datagrid is empty, doesnt show the data!
Ok, the error is that you are defining the store but not creating it.
So the grid just has the name of the store but it expects a store instance,
or is that some thing you have missed in the code snippet above.
I used the same code and here is a running example:
https://fiddle.sencha.com/#fiddle/oel
The server returns date in JSON as below,
{
"LastUpdated": "\/Date(1310117748850)\/"
}
I'm using ExtJs grid and the date is not showing up. How I can display it in M/dd/yyyy format?
this.store = new Ext.data.JsonStore({
autoLoad: {
params: {
start: 0,
limit: 10
}
},
autoDestroy: true,
url: '/home/jobs',
idProperty: 'Name',
fields: ['Name',
'Description',
'Type',
'Group',
'Data',
'Schedule.Name',
'Schedule.Description', {
name: 'LastUpdated',
type: 'date'
},
'Schedule.Expression',
'Status'],
root: 'data',
sortInfo: {
field: 'Name',
direction: 'ASC'
}
});
In Grid colModel:
{
header: 'Last Updated',
dataIndex: 'LastUpdated',
width: 80,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
},
//Grid:
columns: [
{header: 'Last Updated', dataIndex: 'LastUpdated', renderer: Ext.util.Format.dateRenderer('m/d/Y')}
]
//store:
{
field:'LastUpdated',
type:'date',
convert:function(v,j){
return new Date(v.replace(/\/Date((\d+))\//, '$1'));
}
}
In the column section, you could create you own custom date renderer:
columns: [
{header: 'Last Updated', dataIndex: 'LastUpdated', renderer: dateRenderer}
]
And then create a function that processes your date:
function dateRenderer(value, id, r) {
var yourDate = r.data['uploadDate'];
// some js stuff here to strip out just the epoch time
var datevar = new Date(yourDateEpoch);
return Ext.Date.format(datevar, 'm/d/Y')
}
For date field you need also specify dateFormat. E.g.:
{name: 'LastUpdated', type: 'date', dateFormat: 'Y-m-d'}
But in your case you receive date in other format...
The only thing you need to do is to have the following in your model
{name: 'LastUpdated', type: Ext.data.Types.DATE, dateFormat: 'time' }
It tells ExtJS that the data coming into the model for this field is of form epoch time.
Use
return new Date(parseInt(v.replace('/Date(', '')));
full example below,
columns: [
{
header: 'Last Updated',
dataIndex: 'LastUpdated',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}
]
//store:
{
field:'LastUpdated',
type:'date',
convert:function(v, j) {
return new Date(parseInt(v.replace('/Date(', '')));
}
}
I am using Extjs4 and I want to apply exactMatch on grid filtering. I am using the newly introduced Grid Filtering feature.I have tried to use exactMatch but it does not work. Here is my sample code:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'ID', type: 'string'},
{name: 'Title', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'MyModel',
proxy: {
type: 'ajax',
url: 'myurl',
reader: {
type: 'json'
}
},
sorters: [{
property: 'ID',
direction:'DESC'
}],
autoLoad:true
});
var filters = {
ftype: 'filters',
encode: true,
local: true,
filters: [{
type: 'numeric',
dataIndex: 'ID',
disabled: true
},{
type: 'string',
dataIndex: 'Title',
exactMatch:true
}]
};
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'ID',
dataIndex: 'ID',
width: 20
},{
header: 'List Title',
dataIndex: 'Title',
flex:1
}],
renderTo: 'editor-grid',
width: 700,
height: 400,
frame: true,
features: [filters]
});
Thanks..
It looks like for ExtJS V4.0, you don't have to configure seperate filter options for the grid as they are already included. You can just call the method on the store to filter after the data has been loaded like so:
store.filter("Title", "Bob");
or if you want to do multiple filters like so:
store.filter([
{property: "email", value: "Bob"},
{filterFn: function(item) { return item.get("ID") > 10; }}
]);
The grid's features property can only contain classes that have been extended from the Feature class.
See the Grouping Feature:
Ext.define('Ext.grid.feature.Grouping', {
extend: 'Ext.grid.feature.Feature',
alias: 'feature.grouping'
// More properties and functions...
}
Grouping Feature Usage:
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {name} ({rows.length})', //print the number of items in the group
startCollapsed: true // start all groups collapsed
});
var grid = Ext.create('Ext.grid.Panel', {
features:[groupingFeature]
}