Here's an EXTJS rowexpander implementation
http://jsfiddle.net/Litote0707/xPpf2/
When you expand it, you can see the price.
Instead of price, can I show another custom grid something like this?
Ext.define('my.app.main.CustomList', {
extend: 'Ext.grid.Panel',
title: 'List in Rowexpander',
store: Ext.data.StoreManager.lookup('myStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400
});
Related
I'm trying to display an Ext.grid.Grid and fit it to a page. Ideally I'd like to use the flex configuration to make certain columns proportionally wider. But this does not work. The image below is the grid with flex added to the columns with no widths.
columns: [
{ text: 'Name', dataIndex: 'name'},
{ text: 'Email', dataIndex: 'email' },
{ text: 'Phone', dataIndex: 'phone' }
],
If I specify widths on the columns I get the following:
columns: [
{ text: 'Name', dataIndex: 'name', width: 100 },
{ text: 'Email', dataIndex: 'email', width: 230 },
{ text: 'Phone', dataIndex: 'phone', width: 150 }
],
Is there any other way to get the grid to display properly and hopefully fit to the surrounding panel, making the columns stretch to fit?
I have a grid panel and its code is:
{
xtype: 'gridpanel',
x: 10,
y: 10,
autoScroll : true,
// height: 300,
width: 300,
title: 'Grid Panel',
store: 'peopleStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'gender',
text: 'Gender'
},
{
xtype: 'numbercolumn',
dataIndex: 'age',
text: 'Age'
}
]
}
My store structure is :
Ext.define('ThemeApp.store.peopleStore', {
extend: 'Ext.data.Store',
model: 'ThemeApp.model.peopleModel',
storeId: 'peopleStore',
proxy: {
type: 'localstorage',
id: 'PeopleInfo'
}
});
I have a add row button. But only 25 rows are displayed and remaining rows goes behind these 25 rows. Does anyone knows about this problem?
When my app had a similar issue, I fixed it by setting the proxy's limitParam to the empty string, "", which is what the docs recommend if you don't want to send a limit parameter.
It could also be a result of the store's pageSize.
So, I'm having problem with adding a simple toolbar with buttons to my grid. At first I create a grid like this:
Ext.define('MyApp.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
initComponent: function() {
this.columns = [
{header: 'login', dataIndex: 'login', flex: 1},
{header: 'password', dataIndex: 'password', flex: 1},
{header: 'name', dataIndex: 'name', flex: 1},
{header: 'email', dataIndex: 'email', flex: 1},
{header: 'phone', dataIndex: 'phone', flex: 1}
];
this.callParent(arguments);
}
});
It works fine, I got my grid. But now I need to add toolbar with buttons on it, which will do CRUD operations with grid entries. So I added this piece of code:
...
store: 'Users',
items: [{
xtype: 'toolbar',
items: [{
text: 'Добавить',
action: 'create'
},
{
text: 'Редактировать',
action: 'update'
},
{
text: 'Удалить',
action: 'destroy'
}
]
}
],
...
But that doesn't seem to change anything at all. I still can see only plain grid in my browser, so question is what am I doing wrong?
The whole code of this View now looks like that:
Ext.define('MyApp.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
items: [{
xtype: 'toolbar',
items: [{
text: 'Добавить',
action: 'create'
},
{
text: 'Редактировать',
action: 'update'
},
{
text: 'Удалить',
action: 'destroy'
}
]
}
],
initComponent: function() {
this.columns = [
{header: 'login', dataIndex: 'login', flex: 1},
{header: 'password', dataIndex: 'password', flex: 1},
{header: 'name', dataIndex: 'name', flex: 1},
{header: 'email', dataIndex: 'email', flex: 1},
{header: 'phone', dataIndex: 'phone', flex: 1}
];
this.callParent(arguments);
}
});
What do I need to change/add to get it working?
You need to specify the toolbar configuration inside initComponent only. See the following.
this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Добавить',
action: 'create'
}, {
text: 'Редактировать',
action: 'update'
}, {
text: 'Удалить',
action: 'destroy'
}]
}
];
See if this can help you.
Change your definition:
Ext.define('MyApp.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
tbar: [{
text: 'Добавить',
action: 'create'
}]
// .....
});
Better way to structure your component:
Ext.define('MyApp.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
initComponent: function () {
var me = this;
var store = Ext.storeMgr.lookup('Users');
Ext.applyIf(me, {
store: store,
columns: [
{header: 'login', dataIndex: 'login', flex: 1},
{header: 'password', dataIndex: 'password', flex: 1},
{header: 'name', dataIndex: 'name', flex: 1},
{header: 'email', dataIndex: 'email', flex: 1},
{header: 'phone', dataIndex: 'phone', flex: 1}
],
dockedItems: [{
xtype: 'tbar',
dock: 'top',
items: [
{
text: 'Добавить',
action: 'create'
},
{
text: 'Редактировать',
action: 'update'
},
{
text: 'Удалить',
action: 'destroy'
}]
}]
});
me.callParent(arguments);
// could be something like this to load the store
me.on('afterrender', function() {
me.getStore().loadPage(1);
} , me);
}
});
I want to be able to edit grid colums inline as it is shown in a simple grid example in AppSDK docs
https://developer.help.rallydev.com/apps/2.0rc1/doc/#!/example/Grid
but it looks like that this functionality is not available by default if when a custom store is used:
_createGrid: function(stories) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: stories,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
//other columns...
]
});
}
In my app when I click on the Name the field does not become editable as it is in the simple grid example.
The code can be modified as follows to add inline edit capability:
set editor to 'textfield' for the Name column, set grid's selType to 'cellmodel', and instantiate CellEditing plugin.
_createGrid: function(stories) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: stories,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name', editor: 'textfield'
}
//other columns...
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
}
Please see documentation on Ext.grid.plugin.CellEditing here
I have this example code from Sencha's website
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',
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: 'cellmodel',
plugins:
[{
ptype: 'cellediting',
clicksToEdit: 1
}],
height: 200,
width: 400,
renderTo: 'grid'
});
});
This ptype: 'cellediting' plugin allows for inline cell editing by just clicking on textfield.
I just cannot find any posts on how and where the changed value gets saved? How can I add a listener to a cell so that after each change I will be able to alert() the new value?
Thanks for any tips...
The record values are updated each time the editor is blurred (i.e. lose focus). Ext keeps track of fields in the records that have been modified, until you commit the changes (by syncing the store, for example).
To be notified that a field has been edited, use the edit event of the plugin. As you can see in the doc, you can install a listener for this event directly in the grid (no need to add the listener specifically to the plugin).
Edit
With your code, that would be something like this:
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: 'cellmodel',
plugins:
[{
ptype: 'cellediting',
clicksToEdit: 1
}],
height: 200,
width: 400,
renderTo: 'grid',
listeners: {
edit: function(editor, e) {
var record = e.record;
alert(Ext.String.format(
'The field "{0}" or record #{1} has been changed from {2} to {3}',
e.field, record.get('id'), e.originalValue, e.newValue
));
alert('The following fields of the records are dirty: ' + Ext.Object.getKeys(record.modified).join(', '));
}
}
});