I have a grid which has tag columns as follow:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.data.Store', {
storeId: 'tagStore',
fields:[ 'id', 'name'],
data: [
{ id: '123', name: 'cartoon'},
{ id: '124', name: 'animation'},
{ id: '125', name: 'comedy'},
{ id: '126', name: 'action'}
]
});
Ext.create('Ext.data.Store', {
storeId: 'movieStore',
fields:[ 'name', 'tags'],
data: [
{ name: 'Simpsons', tags: '123,124'},
{ name: 'Zootopia', tags: '123,124,125' },
{ name: 'The Godfather', tags: '126' },
{ name: 'La La Land', tags: '123' }
]
});
Ext.create('Ext.grid.Panel', {
title: 'Movies',
store: Ext.data.StoreManager.lookup('movieStore'),
columns: [
{ text: 'Name', flex: 2,dataIndex: 'name' },
{ text: 'Tags', flex: 3,dataIndex: 'tags'}
],
renderTo: Ext.getBody()
});
}
});
Sencha fiddle link is https://fiddle.sencha.com/#view/editor&fiddle/1u84
I want to change grid so that it will be able to edit tags column using tagfield in such a manner that will show name instead of id but when you update the grid it will send id instead of tags name.
Related
I have a gridpanel with three columns I made these 3 columns as comboboxes using editor and I added a cell editing plugin. I should be able to add a row and select the values from the comboboxes coming from three different stores. The problem is I am unable to add a row which doesn't have a default grid store. How can I add a row in order to see the combobox columns to select values.
Here is the fiddle
"Grids are composed of two main pieces - a Ext.data.Store full of data and a set of columns to render."
You must add a store to gridpanel and then try to add a row to the store by clicking the add button. I have modified the code and is working now.
Ext.application({
models: [
'OneModel',
'TwoModel',
'ThreeModel'
],
views: [
'MyGridPanel'
],
name: 'combo',
launch: function() {
Ext.create('combo.view.MyGridPanel', {renderTo: Ext.getBody()});
}
});
Ext.define('combo.view.MyGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygridpanel',
requires: [
'combo.view.MyGridPanelViewModel',
'combo.view.MyGridPanelViewController',
'Ext.grid.column.Column',
'Ext.form.field.ComboBox',
'Ext.view.Table',
'Ext.toolbar.Toolbar',
'Ext.button.Button',
'Ext.grid.plugin.CellEditing'
],
store:Ext.create('Ext.data.Store',{
fields:[{
name:'One',
name:'Two',
name:'Three'
}]
}),
controller: 'mygridpanel',
viewModel: {
type: 'mygridpanel'
},
height: 501,
width: 562,
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'One',
editor: {
xtype: 'combobox',
displayField: 'description',
valueField: 'description',
bind: {
store: '{oneStore}'
}
}
},
{
xtype: 'gridcolumn',
dataIndex: 'number',
text: 'Two',
editor: {
xtype: 'combobox',
displayField: 'lastname',
valueField: 'id',
bind: {
store: '{twoStore}'
}
}
},
{
xtype: 'gridcolumn',
dataIndex: 'date',
text: 'Three',
editor: {
xtype: 'combobox',
displayField: 'name',
valueField: 'id',
bind: {
store: '{threeStore}'
}
}
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
listeners: {
click: 'onButtonClick'
}
}
]
}
],
plugins: [
{
ptype: 'cellediting',
clicksToEdit: 1
}
]
});
Ext.define('combo.view.MyGridPanelViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.mygridpanel',
requires: [
'Ext.data.Store',
'Ext.data.proxy.Memory'
],
stores: {
oneStore: {
model: 'combo.model.OneModel',
data: [
{
description: 'vel'
},
{
description: 'magni'
},
{
description: 'delectus'
},
{
description: 'quas'
},
{
description: 'asperiores'
},
{
description: 'molestias'
},
{
description: 'sunt'
},
{
description: 'facere'
},
{
description: 'et'
},
{
description: 'magnam'
}
],
proxy: {
type: 'memory'
}
},
twoStore: {
model: 'combo.model.TwoModel',
data: [
{
id: 'aperiam_01',
lastname: 'aut'
},
{
id: 'iure_11',
lastname: 'dolores'
},
{
id: 'fugiat_21',
lastname: 'excepturi'
},
{
id: 'et_31',
lastname: 'praesentium'
},
{
id: 'necessitatibus_41',
lastname: 'aperiam'
},
{
id: 'fugiat_51',
lastname: 'quia'
},
{
id: 'ullam_61',
lastname: 'nihil'
},
{
id: 'tempora_71',
lastname: 'nisi'
},
{
id: 'ea_81',
lastname: 'tempora'
},
{
id: 'doloribus_91',
lastname: 'nostrum'
}
],
proxy: {
type: 'memory'
}
},
threeStore: {
model: 'combo.model.ThreeModel',
data: [
{
id: 'sapiente_01',
name: 'dolorem'
},
{
id: 'eum_11',
name: 'animi'
},
{
id: 'rerum_21',
name: 'rerum'
},
{
id: 'earum_31',
name: 'quaerat'
},
{
id: 'voluptatem_41',
name: 'modi'
},
{
id: 'omnis_51',
name: 'autem'
},
{
id: 'autem_61',
name: 'autem'
},
{
id: 'voluptatem_71',
name: 'voluptatum'
},
{
id: 'ut_81',
name: 'pariatur'
},
{
id: 'dolore_91',
name: 'dolorem'
}
],
proxy: {
type: 'memory'
}
}
}
});
Ext.define('combo.view.MyGridPanelViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mygridpanel',
onButtonClick: function(button, e, eOpts) {
button.up('grid').getStore().insert(0, {});
grid.getPlugin('CellEditing').startEditByPosition({row: 0, column: 1});
}
});
Ext.define('combo.model.OneModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'description'
}
]
});
Ext.define('combo.model.ThreeModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'id'
},
{
name: 'name'
}
]
});
Ext.define('combo.model.TwoModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'id'
},
{
name: 'lastname'
}
]
});
The data for the grid looks something like this:
data: [{
field1: abc
field2: [
{value: 0, label: Blue},
{value: 1, label: Green}
]
},
{
field1: def
field2: [
{value: 0, label: Red},
{value: 1, label: Pink}
]
}]
grid component config looks something like:
{
xtype: 'grid',
....
columns: [
{
dataIndex: field1
},
{
dataIndex: field2
editor: {
xtype: combobox,
displayField: label,
valueField: value,
store: new someSampleStore();
}
}
]
}
Now, the grid's column #2 has a combobox.
For Grid's row 0, column 1; combobox dropdown should display these options: Blue, Green
For Grid's row 1, column 1; combobox dropdown should display these options: Red, Pink
Do I need to manually load the data into each combobox (each row) or is there any way I can specify config in column definition so that the combobox picks up data for 'field2' ?
Have a look at the code below. In essence it does what you want but only works after the first click. I'll let you figure that out. ;-)
Demo: https://fiddle.sencha.com/#fiddle/gec
Ext.application({
name: 'Fiddle',
launch: function() {
var comboStore = Ext.create('Ext.data.Store', {
fields: ['value', 'label'],
data: [{
name: '',
value: ''
}],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
dep: "Management",
hired: "01/10/2004",
comboData: [{
label: 'Test1',
value: 'testval1'
}, {
label: 'Test2',
value: 'testval2'
}, {
label: 'Test3',
value: 'testval3'
}]
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
dep: "Sales",
hired: "04/01/2004",
comboData: [{
label: 'Dwight1',
value: 'testval1'
}, {
label: 'Dwight2',
value: 'testval2'
}, {
label: 'Dwight3',
value: 'testval3'
}]
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
dep: "Sales",
hired: "02/22/2006",
comboData: [{
label: 'Jim1',
value: 'testval1'
}, {
label: 'Jim2',
value: 'testval2'
}, {
label: 'Jim3',
value: 'testval3'
}]
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
dep: "Accounting",
hired: "06/10/2007",
comboData: [{
label: 'Kevin1',
value: 'testval1'
}, {
label: 'Kevin2',
value: 'testval2'
}, {
label: 'Kevin3',
value: 'testval3'
}]
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname',
editor: {
xtype: 'combobox',
displayField: 'label',
valueField: 'value',
store: comboStore,
fields: ['value', 'label']
}
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
text: 'Hired Month',
dataIndex: 'hired',
xtype: 'datecolumn',
format: 'M'
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{dep} ({seniority})'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, context, eOpts) {
testData = context.record.data.comboData;
comboStore.setData(testData);
}
}
},
width: 400,
forceFit: true,
renderTo: Ext.getBody()
});
}
});
I am using ExtJs 4.1 grid and have added group feature. In the store I have specified the groupField and grouping feature is working fine. But when the grid renders, the group header is shown as Group: Group-Name". How Can I prevent 'Group' keyword from appearing in the group header (which is highlighted on below image).
Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function() {
Ext.regModel('Teams', {
fields: ['name', 'sport']
});
var teamStore = new Ext.data.Store({
model: 'Teams',
sorters: ['sport','name'],
groupField: 'sport',
data: [
{ name: 'Aaron', sport: 'Table Tennis' },
{ name: 'Aaron', sport: 'Football' },
{ name: 'Abe', sport: 'Basketball' },
{ name: 'Tommy', sport: 'Football' },
{ name: 'Tommy', sport: 'Basketball' },
{ name: 'Jamie', sport: 'Table Tennis' },
{ name: 'Brian', sport: 'Basketball' },
{ name: 'Brian', sport: 'Table Tennis' }
]
});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: teamStore,
width: 400,
height: 300,
title: 'Sports Teams',
features: [{
ftype: 'grouping'
}],
headers: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Sport',
dataIndex: 'sport'
}]
});
});
features: [{
ftype: 'grouping',
groupHeaderTpl: '{name}'
}]
I'm trying to set values for the components in a form panel and below is my code.
Form Panel with grid:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
height: 436,
width: 754,
layout: {
columns: 4,
type: 'table'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'displayfield',
colspan: 4,
fieldLabel: '',
value: 'Display Field'
},
{
xtype: 'displayfield',
colspan: 2,
margin: '0 50 0 0 ',
fieldLabel: 'Age',
labelAlign: 'top',
value: 'Display Field'
},
{
xtype: 'displayfield',
colspan: 2,
fieldLabel: 'Country',
labelAlign: 'top',
value: 'Display Field'
},
{
xtype: 'gridpanel',
colspan: 4,
header: false,
title: 'My Grid Panel',
store: 'MyJsonStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'DeptName',
text: 'Dept Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'DeptId',
text: 'Dept ID'
}
]
}
]
});
me.callParent(arguments);
}
});
Models:
Ext.define('MyApp.model.EmpModel', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.DeptModel'
],
fields: [
{
name: 'Name'
},
{
name: 'Age'
},
{
name: 'Country'
},
{
name: 'Dept'
}
],
hasMany: {
associationKey: 'Dept',
model: 'MyApp.model.DeptModel'
}
});
Ext.define('MyApp.model.DeptModel', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.EmpModel'
],
fields: [
{
name: 'DeptName'
},
{
name: 'DeptId'
}
],
belongsTo: {
associationKey: 'Dept',
model: 'MyApp.model.EmpModel'
}
});
Store:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.EmpModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.EmpModel',
storeId: 'MyJsonStore',
data: {
EmpDet: [
{
EmpName: 'Kart',
Age: '29',
Dept: [
{
DeptName: 'Dev',
DeptId: '1000'
}
]
}
]
},
proxy: {
type: 'ajax',
url: 'data/empDet.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});
Json data:
{
"EmpDet": [
{
"EmpName": "Kart",
"Age": "29",
"Dept": [
{
"DeptName": "Dev",
"DeptId": "1000"
}
]
}
]
}
Questions:
1) I had left the value of the component as "Display Field" itself because if I remove this value the width of the grid below decreases. I feel this is because of the table layout and colspans. Is there any other best way to display labels without any alignment change on value load.
2) I'm trying to set the value for the display field. I tried to do it with the afterrender event but the problem is that it throws a undefined error at Ext.getStore('MyJsonStore').getAt(0). I found that this works fine if I write the same in the click event of a button. So, I feel that the store is not loaded when I try the afterrender event of the displayfield (autoload for store is set to true). Is there an alternative for afterrender event of a component. Also, Is there a way to set all the field values at a stretch instead of setting every component one by one?
3) Also I find it difficult to do the association properly. I'm using Sencha Architect 2.2 and when I go the data index of the grid, I'm not able to get the "DeptName" and "DeptId" in the dropdown.
Please help.
For the question number 2, I want to suggest the below way. I hope it works for you.
My solution:
You can set the display fields values when the store is loaded. So you can use load event of store as below:
yourStoe.on('load',function()
{
//set display field values here
});
I am design ExtJs Gridpanel with Checkboxes...
How to get checked records for save the data
Use getSelections to get all selected records and getSelected to get the first record.
var selected = checkBoxSelectionModelObj.getSelections();
for (var i = 0; i < selected.length; i++)
{
alert(selected[i].data.code);
}
In ExtJs docs provide method to get selected record in grid grid.getSelection(). You can refer ExtJs docs
I have create small demo to show you, how it work. Sencha fiddle example
var store = Ext.create('Ext.data.Store', {
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'
}, {
name: 'AMargeia',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
id: 'testGrid',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
selModel: {
checkOnly: false,
injectCheckbox: 'last',
mode: 'SIMPLE'
},
selType: 'checkboxmodel',
buttons: [{
text: 'Select All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().selectAll();
}
}, {
text: 'Deselect All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().deselectAll();
}
},{
text:'Print Selected Recod',
handler:function(){
var selection = Ext.getCmp('testGrid').getSelection();
if(selection.length){
let name='';
selection.map(item=>{
name+=item.get('name')+'<br>';
});
Ext.Msg.alert('Selected Record',name);
}else{
Ext.Msg.alert('Error','Please select record');
}
}
}]
});