Ext.define('TPL.view.Book', {
extend: 'Ext.grid.Panel',
alias: 'widget.book',
title: 'Books',
store: 'Book',
header: false,
stripeRows: true,
initComponent: function() {
this.columns = [
{header: 'Id', dataIndex: 'id', flex: 1},
{header: 'Author', dataIndex: 'author', width: 50, flex: 0},
{header: 'Price', dataIndex: 'price', width: 50, flex: 0},
];
this.callParent(arguments);
}});
And in header (column - 'Author') i am want make filter - so when a user enters a word into the filter, then outputs the result in the table (filter should be independent case for words). How make this? thanks
about this:
To use filters on the grid panel you have to do the following:
add 'Ext.ux.grid.FiltersFeature' to the 'requires' property of your grid,
add filters as a feature to your grid panel:
features: [
{
ftype: 'filters',
local: true
}
]
and finally, mark the columns you which to have the filter using the property 'filter':
{
xtype: 'gridcolumn',
filter: {
type: 'string'
}
...
}
Related
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 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
]
});
Just getting frustrated by something that should be an easy fix, but I'm too simple minded to see it :)
I'm having a grid where 1 column is a combobox. The thing works just fine and the correct value is beeing sent through my ajax request, but after I edited the grid row, the combobox disappread and the value that comes into place is not the label, but the value.
editor: new Ext.form.field.ComboBox({
typeAhead: true,
lazyRender: true,
store: new Ext.data.ArrayStore({
fields: ['contact', 'contactLabel'],
data: [
[1,'Jan'],
[2,'Jeroen'],
[3,'Mattijs'],
[4,'Sven'],
[5,'Thomas'],
[6,'Yoran']
]
}),
valueField: 'contact',
displayField: 'contactLabel',
hiddenName: 'contact'
})
So what happens is that when I change the combobox to i.e.. "Thomas", the value of the cell becomes "5", instead of "Thomas". I thought that defining value/display fields would make a difference, but it does not.
Anyone that knows the answer?
I am not quite sure if I got you right. If so you will need a renderer for that. I guess the example below the code snipped should show you if you are meaning such a case.
// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField) );
};
}
// the edit combo
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
See this full working example for both (cellEditing + rowEditing) JSFiddle ()
Here's the complete code
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', 'id'],
data:{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224","id": 0},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555-222-1234","id": 1},
{"name":"Homer", "email":"home#simpsons.com", "phone":"555-222-1244","id": 2},
{"name":"Marge", "email":"marge#simpsons.com", "phone":"555-222-1254","id": 3}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// the combo store
var store = new Ext.data.SimpleStore({
fields: [ "value", "text" ],
data: [
[ 0, "Option 0" ],
[ 1, "Option 1" ],
[ 2, "Option 2" ],
[ 3, "Option 3" ]
]
});
// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField) );
};
}
// the edit combo
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
// demogrid
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'},
{header: 'id', dataIndex: 'id', editor: combo, renderer: comboBoxRenderer(combo)}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: 'cell'
});
// demogrid
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'},
{header: 'id', dataIndex: 'id', editor: combo, renderer: comboBoxRenderer(combo)}
],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: 'row'
});
html
<div id="cell"></div>
<div id="row"></div>
Try:
data: [
{contact: 1, contactLabel: 'Jan'},
...
]
I have a GRID which works properly. Now I need to add this GRID to the first Tab Panel. How can I do that?
my code:
GRID.JS
Ext.create('Ext.grid.Panel', {
xtype:'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
TAB.JS
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
xtype:'grid'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
I have added the xtype:grid in GRID.JS and I am trying to access that Grid from TAB.JS in the 1st tab, but it is not getting displayed.
xtype: 'grid' - means create standard Ext.grid.Panel and add it here.
You have two options:
Create your grid and save it into variable.
var _grid = Ext.create('...', {...});
Ext.create('Ext.tab.Panel', {
...
items: [
_grid
]
});
Or, define your own class with new xtype
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
...
});
Ext.create('Ext.tab.Panel', {
...
items: [{
xtype: 'mygrid'
}]
});
I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .
This is the code:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true,
reader: reader,
data: xg.dummyData
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: 'Change', dataIndex: 'change'},
{header: '% Change', dataIndex: 'pctChange'},
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
{
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'M d, Y'
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
this.tabs = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
dockedItems: [
{
xtype:'toolbar',
title:'Hello World'
}],
tabBar: {
ui: 'light',
layout: {
pack: 'left'
}
},
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
}, {
cls:'world',
id:'tab3',
html : '<a>hello world</a>',
dockedItems:grid
}]
});
When I load the page there's no error, but the grid is not shown.
The grid is not a docked item (that's for toolbars and other things that should stick to one side of a container). If you want the grid to take up the entire tab, just add it directly as an item to the TabPanel and it will become the full tab:
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
},
grid ]