I'm trying to implement a simple parent children relation in the same entity with Ext js 6, where I will receive all the information in the JSON. It is working fine for the parent but I'm not able to display the children in the grid. I guess it is something really simple and the error should be in the model:
Ext.define('hashmanytest.model.Person', {
extend: 'Ext.data.Model',
alias: 'model.Person',
hasMany: {
model: 'hashmanytest.model.Person',
name: 'childs',
associationKey: 'childs'
},
fields: [
{ name:'name' , type:'string' },
{ name:'email' , type:'string' },
{ name:'phone' , type:'string' },
{ name:'id' , type:'string' },
{ name: 'parent', reference: 'hashmanytest.model.Person'}
]
});
Or in the store:
Ext.define('hashmanytest.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
model: 'hashmanytest.model.Person',
data: { items: [
{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111", id:1, parent: {}, childs: [
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222", id:2},
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333", id:3},
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444", id:4}
]},
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222", id:2, parent:{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111", id:1}, childs: []},
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333", id:3, parent:{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111", id:1}, childs: []},
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444", id:4, parent:{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111", id:1}, childs: []}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Anyway I created a fiddle with the implementation:
https://fiddle.sencha.com/#fiddle/11gr
Any help would be really appreciated
The model is fine, record.childs() returns a store. Use getCount() instead of length:
{
text: 'Children',
sortable: true,
flex: 2,
renderer: function (value, metaData, record) {
return record.childs().getCount();
}
}
https://fiddle.sencha.com/#fiddle/11gs
Related
I have grid panel. I want to add a tree panel to a column in that grid panel.
Grid Panel
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: 'homer#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: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Tree Store
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: 'detention', leaf: true },
{ text: 'homework', expanded: true, children: [
{ text: 'book report', leaf: true },
{ text: 'algebra', leaf: true}
] },
{ text: 'buy lottery tickets', leaf: true }
]
}
});
For example,
If I want to this tree store to come under Name: Lisa i.e, tree expands when we click on Lisa. How can we do it.
Thank you.
What you are searching for is treegrid.
For modern toolkit, check modern treegrid.
For classic toolkit, check classic treepanel with multiple columns.
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'm going through a sencha tutorial and I'm receiving this error when attempting to implement a store in my app. I'm sure this is something simple I'm overlooking but I'm having trouble figuring out what it is.
applyStore] The specified Store cannot be found
Here is the relevant code:
//from app.js
stores: [
'MyStore'
],
//from the view
Ext.define('listerApp2.view.Main', {
extend: 'Ext.dataview.List',
xtype: 'main',
requires: [
'Ext.TitleBar',
'listerApp2.store.MyStore'
],
config: {
title: 'My listing',
store: 'MyStore'
}
});
//from the store
Ext.define('listerApp2.store.MyStore', {
requires: ['listerApp2.model.MyModel'],
config: {
autoload: true,
model: 'MyModel',
storeId: 'MyStore',
alias: 'store.MyStore',
data: [
{firstName: 'Washington', lastName: 'George', age: 250},
{firstName: 'Lincoln', lastName: 'Abe', age: 200},
{firstName: 'Clinton', lastName: 'Bill', age: 60}
],
proxy: {
type: 'localStorage'
}
}
});
//and the model
Ext.define('listerApp2.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'age', type: 'int' }
]
}
});
You have mixed up many things in your code. For e.g. you have used localStorage and storeId which are not making any sense here. I have simplified your code and pasting here:
Model
Ext.define('MyApp.model.DataModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'firstName', type: 'string' },
{ name: 'lastName', type: 'string' },
{ name: 'age', type: 'int' }
]
}
});
Store
Ext.define('MyApp.store.DataStore', {
extend: 'Ext.data.Store',
config: {
model: 'MyApp.model.DataModel',
autoLoad: true,
data: [
{firstName: 'Washington', lastName: 'George', age: 250},
{firstName: 'Lincoln', lastName: 'Abe', age: 200},
{firstName: 'Clinton', lastName: 'Bill', age: 60}
]
}
});
View
Ext.define('MyApp.view.HobbyList', {
extend: 'Ext.List',
xtype: 'hobbyList',
requires: [
'Ext.dataview.List'
],
config: {
styleHtmlContent : true,
itemTpl : new Ext.XTemplate(
'{firstName} {lastName} is {age} years old.'
),
store: 'DataStore'
}
});
I have tested this. It is working fine. Take a look.
Happy Coding!
I have tree store.
var store = Ext.create('Ext.data.TreeStore', {
root: {
autoLoad:false,
expanded: false,
children: [
{
id:"0", text: "School Friends", expanded: true, children:
[
{
id:"1", text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"
},
{
id:"select", text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"
}
]
}
]
}
});
and Tree panel.
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
afterrender:function(){
var record = this.getStore().getNodeById('1');
this.getSelectionModel().select(record)
}
}
});
everything works! but when I change store, using proxy request. Selection is n*ot working*
var storeTree = Ext.create('Ext.data.TreeStore', {
autoLoad:true,
expanded: true,
proxy: {
type: 'ajax',
url: 'tree.json',
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true,
// children:[]
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
I use same JSON
[
{"id":4, "text":"second",},
{
id:"0", text: "School Friends", expanded: true, children:
[
{
id:"1", text: "Mike", leaf: true, name: "Mike", email: "mike#stackoverflow.com", phone: "345-2222"
},
{
id:"select", text: "Laura", leaf: true, name: "Laura", email: "laura#stackoverflow.com", phone: "345-3333"
}
]
},
]
for example one solution:
var storeTree = Ext.create('Ext.data.TreeStore', {
autoLoad:false,
expanded: false,
proxy: {
type: 'ajax',
url: 'tree2.json',
extraParams: {o: 'SELECTED'},
},
root: {
text: 'Ext JS',
id: 'src',
expanded: true,
children:[]
},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});
storeTree.load({
url: 'tree.json'
});
storeTree.on({
'load': function(store) {
var node = store.getNodeById("select"); // your id here
treePanel.getSelectionModel().select([node]);
treePanel.selectPath(node.getPath());
},
single: true
});
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');
}
}
}]
});