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!
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'
}
]
});
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.
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
I have problems to make an 1 to many model with Sencha Touch 2.
I want to save "persons" and add "todo's" to persons.
These values should be saved at the local storage.
So 1 person can have many todo's.
For this I have 2 models and 2 stores.
Personmodel:
Ext.define("app.model.PersonModel", {
extend: "Ext.data.Model",
config: {
idProperty: 'email',
fields: [
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' },
],
validations: [
{ type: 'presence', field: 'email' , message: 'Blabla'},
{ type: 'presence', field: 'name' , message: 'Blabla'},
{ type: 'email', field: 'email' , message: 'Blabla'},
]
}
});
TodoModel:
Ext.define("app.model.TodoModel", {
extend: 'Ext.data.Model',
config: {
idProperty: 'todoId',
fields: [
{ name: 'todoId', type: 'int' },
{ name: 'email', type: 'string' },
{ name: 'note', type: 'string' }
],
validations: [
{ type: 'presence', field: 'todoId', message: 'Blabla' },
{ type: 'presence', field: 'email', message: 'Blabla' },
{ type: 'presence', field: 'note', message: 'Blabla' }
]
}
});
PersonStore:
Ext.define("app.store.PersonStore", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
model: "app.model.PersonModel",
proxy: {
type: 'localstorage',
id: 'todo-app-personstore'
},
sorters: [{ property: 'name', direction: 'ASC'}],
grouper: {
sortProperty: "name",
direction: "ASC",
groupFn: function (record) {
}
}
}
});
TodoStore:
Ext.define("app.store.TodoStore", {
extend: "Ext.data.Store",
requires: "Ext.data.proxy.LocalStorage",
config: {
model: "app.model.TodoModel",
proxy: {
type: 'localstorage',
id: 'todo-app-todostore'
},
sorters: [{ property: 'email', direction: 'ASC'}],
grouper: {
sortProperty: "email",
direction: "ASC",
groupFn: function (record) {
}
}
}
});
I deleted the associations I made in the models because they didn't work at all.
Maybe relevant information: First I want to save a person. Later on I want to save todo's and connect them to a person.
Try Referring below links may helpful to you
http://miamicoder.com/2012/sencha-touch-2-models-hasmany-associations-php-example/
http://appointsolutions.com/2012/07/using-model-associations-in-sencha-touch-2-and-ext-js-4/
I'm trying to load nested JSONData into my tree grid. On the first call to get data, all the data needed to populate the grid is returned in the response as a JSON Object. However I can see that it still tries fetch data for all the parent objects in the grid.
Even after the spurious GETs, it is still unable to populate the child Nodes.
I've defined 2 models, the parent with a "hasMany" relationship referring to the child model, and the child node with "BelongsTo" relationship referring to the parent model
I'm using an Ajax Proxy with a JSON reader.
Searching the web I can't find much information and I've used the user-orderitems-products example in the extJS documentation to try and set up the my models and tree.
I'm not entirely sure what I'm missing. Any assistance would be much appreciated.
JSON (person may or may not have children objects):
People: {
{firstName: john, id:123, uniqueID:1231, leaf:true},
{firstName: jane, id:124, uniqueID:1240,
offspring:[
{firstName: adam, id:124, uniqueID:1241, leaf:true},
{firstName: brandon, id:124, uniqueID:1242, leaf:true},
{firstName: claire, id:1243, uniqueID:1243, leaf:true}
]}
}
Model:
Ext.define('Person',{
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type:'string'},
{name: 'uniqueID', type:'float'}
hasMany: {
model:'Offspring',
name: 'Offspring',
associationKey: 'offspring',
primaryKey: 'uniqueID',
foreignKey: 'id'
}
],
proxy: {
type: 'rest',
url: 'http://blah/blah',
reader: {
type: 'json',
root: 'People'
}
}
});
Ext.define('Offspring',{
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type:'string'},
{name: 'uniqueID', type:'float'}
],
belongsTo: 'Person'
});
Store Definition:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Person',
folderSort: true
}
I suspect you might be confusing a simple parent-child relationship with hasMany relationship.
But for your original question. You are returning a node (jane) which is not a leaf, but has no children returned. As your proxy root for Person is People, the children property should also be people.
I believe the following JSON will work for you:
People: {
{firstName: john, id:123, uniqueID:1231, leaf:true},
{firstName: jane, id:124, uniqueID:1240,
People:[
{firstName: adam, id:124, uniqueID:1241, leaf:true},
{firstName: brandon, id:124, uniqueID:1242, leaf:true},
{firstName: claire, id:1243, uniqueID:1243, leaf:true}
]}
}
Here is a working code:
Model:
Ext.define('BS.model.ItemCategory', {
extend: 'Ext.data.Model',
fields: [
{name: 'name' , type: 'string'},
{name: 'iconCls' , type: 'string', defaultValue: 'treenode-no-icon'},
{name: 'leaf' , type: 'boolean', defaultValue: false},
{name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
{name: 'index' , type: 'int'},
],
proxy: {
type: 'direct',
api: {
create: ItemCategories.Create,
read: ItemCategories.Read,
update: ItemCategories.Update,
destroy: ItemCategories.Destroy,
},
},
});
Store:
Ext.define('BS.store.ItemCategories', {
extend: 'Ext.data.TreeStore',
model: 'BS.model.ItemCategory',
autoSync: true,
root: {
text: 'Root',
id: 'NULL',
expanded: true
},
clearOnLoad: true,
});
JSON:
"result":{
"success":true,
"children":[
{
"id":"1",
"parentId":null,
"name":"DFM",
"index":"0",
"deleted":"0",
"children":[
{
"id":"6",
"parentId":"1",
"name":"Studios",
"index":"0",
"deleted":"0",
"loaded":true,
"leaf":false
},
{
"id":"7",
"parentId":"1",
"name":"Equipment",
"index":"1",
"deleted":"0",
"children":[
{
"id":"18",
"parentId":"7",
"name":"Cameras",
"index":"0",
"deleted":"0",
"loaded":true,
"leaf":false
},
{
"id":"20",
"parentId":"7",
"name":"Tripods",
"index":"1",
"deleted":"0",
"loaded":true,
"leaf":false
},
{
"id":"26",
"parentId":"7",
"name":"Lighting Kits",
"index":"2",
"deleted":"0",
"loaded":true,
"leaf":false
}
],
"leaf":false
}
],
"leaf":false
},
{
"id":"3",
"parentId":null,
"name":"3D",
"index":"2",
"deleted":"0",
"loaded":true,
"leaf":false
}
]
}
There's an example of exactly this in the SDK download: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.html