I have defined a model type that represent an object with xtype 'image'. Now i'm trying to load this objects in Ext.Panel from JSON using ComponentLoader:
Ext.define('ItemModel', {
extend: 'Ext.data.Model',
idProperty: 'itemModel',
fields: [{
name: 'id',
type: 'int'
},{
name: 'xtype',
type: 'string'
},{
name: 'src',
type: 'string'
}]
});
var previews = Ext.create('Ext.Panel',{
layout: 'column',
height: 500,
items: {
loader:{
autoLoad : true,
url: 'php/read.php',
renderer: "component"
}
}
});
But i get such error:
TypeError: me.el is null
me.container = Ext.get(me.el.dom.parentNode);
JSON which returned by read.php looks just like this:
{"items":[{"id":0,"xtype":"image","src":"img\/newalbum.png"},{"id":1,"xtype":"image","src":"img\/newalbum1.png"}]}
But if i'm create a 'store' with 'reader', and trying iterate loaded objects, it's works fine:
Ext.define('ItemModel', {
extend: 'Ext.data.Model',
idProperty: 'itemModel',
fields: [{
name: 'id',
type: 'int'
},{
name: 'xtype',
type: 'string'
},{
name: 'src',
type: 'string'
}]
});
Ext.define('ItemModelStore', {
extend: 'Ext.data.Store',
model: 'ItemModel',
proxy: {
type: 'ajax',
url: 'php/read.php',
reader: {
type: 'json',
root: 'items'
}
}
});
var itemModelStore = Ext.create('ItemModelStore');
itemModelStore.load(function() {
itemModelStore.each(function(record){
alert(record.get('src'));
});
});
Related
I have a store with associated model and I need to include values of this associated model into selectfield component in Sencha Touch.
Here my parent model:
Ext.define('x.customer.model.CustomerModel', {
extend: 'Ext.data.Model',
requires:[
'x.customer.model.CustomerTemplateModel'
],
config: {
useCache: false,
idProperty: 'id',
fields: [
{
name: 'id',
type: 'string'
},
{
name: 'address',
type: 'string'
},
{
name: 'name',
type: 'string'
},
{
name: 'type',
type: 'int'
}
],
associations: [
{
type: 'hasMany',
associatedModel: 'Survey.customer.model.CustomerTemplateModel',
ownerModel: 'Survey.customer.model.CustomerModel',
associationKey: 'templates',
autoLoad: true,
name: 'templates'
}
]
}
});
and the children model:
Ext.define('x.customer.model.CustomerTemplateModel', {
extend: 'Ext.data.Model',
requires:[],
config: {
useCache: false,
rootProperty: 'templates',
fields: [
{
name: 'text',
type: 'string'
},
{
name: 'value',
type: 'string'
}
]
}
});
store:
requires: ['Survey.customer.model.CustomerModel'],
config: {
model: 'Survey.customer.model.CustomerModel',
proxy: {
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
}
Currently the json has this structure:
{
"id": "00000001",
"address": "Antsy Road",
"name": "asfas",
"phone": "55555",
"openSurveys": 7,
"templates": [
{
"text": "123",
"value": "Template 1"
}
],
"type": 1,
"withSurveys": true
},
how to implement data included in the "templates" nested json in a selectfield?
thank you in advance
Once your store loaded and if you have one custommer:
var templatesData = []; // What will be inserted to the ComboBox
for (var i=0; i < custommers[0].get('templates').length; i++) { // Running threw the values and populating templatesData
var templateModel = custommers[0].get('templates')[i];
var templateCombo = {
text: templateModel.data.text,
value: templateModel.data.value
};
templatesData.push(templateCombo);
}
// Setting the values to the combobox
Ext.getCmp('myCombo').setStore(Ext.create("Ext.data.Store", {
model: 'x.customer.model.CustomerTemplateModel',
data :templatesData
}));
This is not a unique solution, you could create a new instance of store as well. Here is more information about how setting the "store" property for a combobox : http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.ComboBox-cfg-store
I thought I had defined a model for my store, but my console and also my application seem to disagree.
My code looks something like this:
Ext.define("Deeper", {
extend: 'Ext.data.Model',
fields: [{
name: 'ID',
type: 'int'
}, {
name: 'someoneElsesID',
type: 'int'
}, {
name: 'anotherID',
type: 'int'
}],
belongsTo: 'Higher'
});
Ext.define("Higher", {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'status',
type: 'int'
}],
hasMany: {
model: 'Deeper',
name: 'deeper'
}
});
after that, I created the following store:
var store = Ext.create('Ext.data.Store', {
model: 'Higher',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'some/correct/url.json',
reader: {
type: 'json',
root: 'name'
}
}
});
My grid shows inline data correctly, so I tried console.debug(store)
The result is:
model: undefined
and
modelDefaults: null
So where did I go wrong?
I have inherited an ExtJs4 project, and I've got a fairly basic question.
I have a view that has a newly added checkbox field as one of the items, like so:
{
boxLabel: 'Test Message?',
xtype: 'checkboxfield',
id: 'cbTextMessage',
checked: false,
name: 'testMessage',
inputValue: true,
uncheckedValue: false
}
When the record is active, this value changes to the appropriate checked or unchecked state. When creating a new record, the value is set to the value of the checkbox. However, when editing an existing record, the model never gets updated to any value other than the original value.
The model:
Ext.define('PushAdmin.model.Message', {
extend: 'Ext.data.Model',
idProperty: 'id',
requires: ['Proxy.ParameterProxy'],
fields: [
{ name: 'id', type: 'int' },
{ name: 'games', type: 'auto',
convert: function(data, model) {
data = ( data && !Ext.isArray(data) ) ? [data] : data;
return data;
}
},
{ name: 'msgEnglish', type: 'string' },
{ name: 'msgFrench', type: 'string' },
{ name: 'msgSpanish', type: 'string' },
{ name: 'testMessage', type: 'bool' },
{ name: 'sendAt', type: 'date' },
{ name: 'note', type: 'string'},
{ name: 'status', type: 'string' },
],
proxy: {
type: 'rest',
url: '/apnsadmin/rest/Message',
pageParam: undefined,
startParam: undefined,
limitParam: undefined,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
And finally this is the function that gets called when the save button is clicked.
click: function () {
var grid = this.getQueuedMessagesGrid();
var sm = grid.getSelectionModel();
var selectedRecord = sm.getCount() > 0 ? sm.getSelection()[0] : undefined;
this.getMessageForm().getForm().updateRecord();
var newRecord = this.getMessageForm().getForm().getRecord();
if (selectedRecord!=undefined) {
console.log(selectedRecord);
console.log(newRecord);
selectedRecord.save();
} else {
// New record!
console.log("Saving new record");
grid.getStore().add(newRecord);
newRecord.save();
}
this.getMessageForm().setDisabled(true);
this.getMessageForm().getForm().reset();
}
},
I am aware that things are probably not the proper ExtJS way to do things, but since this is mostly working I am trying not to have to rewrite large chunks of it. I'd just like to know what I'm doing wrong in adding this checkbox/boolean field to the form.
Part of My Item Model:
Ext.define('DnD.model.Item', {
extend: 'Ext.data.Model',
idProperty:'item_number',
associations: [{
type: 'belongsTo',
model: 'Company',
primaryKey: 'id',
foreignKey: 'company_id',
autoLoad: true
}],
proxy: {
type: 'ajax',
url: 'data/items.json',
reader: {
type: 'json',
root: 'items',
idProperty:'id'
}
},
fields: [{
name: 'id',
type: 'int'
},{
name: 'box_number',
type: 'float'
}, {
name: 'item_number',
type: 'float'
}, {
name: 'name',
type: 'string'
},{
name: 'format',
type: 'int'
}, {
name: 'company_id',
type: 'int'
}, {
...
The Company Model
Ext.define('DnD.model.Company', {
extend: 'Ext.data.Model',
associations: [{
type: 'hasMany',
model: 'Item',
primaryKey: 'id',
foreignKey: 'company_id',
autoLoad: true
}],
idProperty:'id',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'name',
type: 'string'
}],
proxy: {
type: 'ajax',
url: 'data/companies.json',
reader: {
successProperty: true,
type: 'json',
root: 'companies',
idProperty:'id'
}
}
})
The app.js file
Ext.Loader.setConfig({
enabled: true,
paths: {
Ext: 'extjs/src',
My: 'app'
}
});
Ext.application({
name: 'DnD',
appFolder: 'app',
autoCreateViewport: false,
controllers: [
'Collections',
'Items'
],
launch: function() {
this.viewport = Ext.create('DnD.view.Viewport', {});
this.viewport.show();
}
});
The Problem
With the code the way it is now, whenever I make a new instance of the item model and attempt to call myItem.getCompany() the console throws an error telling me that the object I created has no such method.
Now, if I change the association to say that an Item belongs to DnD.model.Company (as opposed to just Company), a getter method is created, but it's called getDnD.model.Company() (as opposed to just getCompany()).
From what I can see, it appears that the autoloader can't find the model unless I mention the full path name. However, take a look at my Collection Controller:
Ext.define('DnD.controller.Collections', {
extend: 'Ext.app.Controller',
models: [
'Collection'
],
stores: [
'Collections',
],
views:[
'collection.List'
],
refs: [{
ref: 'collectionList',
selector: 'collectionlist'
}],
init: function() {
}
});
Notice I can reference the models, stores and views without using the full namespace.
Any guidance would be very appreciated.
BelongsTo association has config options "getterName" and "setterName", you can use them to define your own getter and setter method names. Example: {type: 'belongsTo', model: 'My.model.User', foreignKey: 'userId', getterName: 'getUser'}
http://docs.sencha.com/ext-js/4-0/#/api/Ext.data.BelongsToAssociation
The model:
Ext.ns('Workout.Models.user');
Ext.regModel('User', {
fields: [{
name: 'member_id',
type: 'int'
}, {
name: 'first_name',
type: 'string'
}, {
name: 'last_name',
type: 'string'
}, {
name: 'username',
type: 'string'
}, {
name: 'password',
type: 'string'
}, {
name: 'dob',
type: 'date',
dateFormat: 'Y-m-d'
}, {
name: 'email_address',
type: 'string'
}, {
name: 'is_active',
type: 'int'
}],
proxy: {
type: 'ajax',
format: 'json',
url: '../../_dev/json_fixtures/users.json',
reader: {
type: 'json',
root: 'users'
},
root: 'users'
}
});
The Store:
Ext.ns('Workout.Stores');
Workout.Stores.user = new Ext.data.Store({
model: 'User',
storeId : 'Workout.Stores.user',
sorters: [
'last_name',
'first_name',
'member_id'
],
autoLoad: true
});
The Grid:
Ext.ns('Workout.User');
Workout.User.grid = new Ext.grid.Panel({
store: 'Workout.Stores.user',
columns:[{
text: 'Created At',
dataIndex: 'created_at'
}, {
text: 'First Name',
dataIndex: 'first_name'
}]
});
The JSON File
{
"users":[{
"created_at":"2011-04-01 14:13:34",
"member_id":"14453",
"first_name":"Jemima",
"last_name":"Petersen",
"username":"jpeterson",
"password":"TDW29HOH7WY",
"dob":"1960-07-03",
"email_address":"at.velit.Pellentesque#sociis.com"
}]
}
Wheh I load my HTML page, the grid is empty. However, if I supply raw data to the store via the data param, it loads. If I call User.load() manually via the console, nothing happens. If i call User.load() and pass in a valid JSON object,nothing happens.
Is there something I'm missing / not doing right?
You have done everything expect set the height of your grid panel. You need to set the height to display the records. Here is what I would add to your grid panel config:
height: 300
Now, apart from this, you have other problems like you have not defined created_at in your User model. If you plan to display the value in your grid, you need to update your model as well.
Ext.define(
'BK.store.Categories'
, { extend : 'Ext.data.Store'
, model : 'BK.model.Category'
, autoload : true
, proxy : { type : 'ajax'
, format : 'json'
, root : 'results'
, api : { read : 'data/data1.json' }
, reader : new Ext.data.JsonReader({ type : 'json'
, root : 'results'
, successProperty : 'success'
})
}
}
);
when I use data hardcoded in the store, it works OK (so model, view, controller are OK), as soon as I use the proxy it behaves as if autoload were FALSE, no net request