extjs post with parameter - extjs

I'm creating a data store that will load the data from server. I'm wondering how I can pass parameters to the proxy.
var dataStore = new Ext.data.JsonStore({
proxy:'productSearch.php',
root:'products',
fields:['title', 'image', 'inStock', 'price', 'category', 'manufacturer']
});

I usually do it like this
var dataStore = new Ext.data.JsonStore({
url: 'productSearch.php'
root: 'products',
baseParams: { //here you can define params you want to be sent on each request from this store
param1: 'value1',
param2: 'value2'
},
fields: [...]
});
dataStore.load({
params: { //here you can define params on 'per request' basis
param3: 'value3'
}
});
I also prefer to define fields like this:
fields: [
{name: 'title', mapping: 'title', type: 'string'},
{name: 'image', mapping: 'image', type: 'string'},
{name: 'inStock', mapping: 'inStock', type: 'bool'},
{name: 'price', mapping: 'price', type: 'float'},
{name: 'category', mapping: 'category', type: 'int'},
{name: 'someDate', mapping: 'someDate', type: 'date', dateFormat: 'Y-m-d'},
]
Two things here:
I assign the types, so that the store is loaded with correct datatypes. It will even convert string dates to JavaScript Date() objects.
I use 'mapping' parameter, to tell which fields from JSON are to be matched to which fields in the store. If for whatever reason JSON format changes, I only need to make one change here.

Related

idProperty in Sencha Touch 2.3.1

I have the model:
Ext.define('EvaluateIt.model.Address', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'address', type: 'string'},
{name: 'city', type: 'string'},
{name: 'state', type: 'string'},
{name: 'zipcode', type: 'string'},
{name: 'county', type: 'string'}
],
proxy: {
type: "sql",
database: 'Test'
}
}
});
In my controller, I insert data into this model as follows:
var address = Ext.create('EvaluateIt.model.Address', {
address: json[i].garden.address.address
});
address.save();
Where the json array is grabbed via Ajax and thus inserted into the model without any problems.
However, when I try to access the id from the model like,
console.log('address.id ' + address.id);
I get something of the form ext-record-n (where n does not even map to the id in my Address table). How can I reference the actual value of the id column in this table? I tried this, but was unsuccessful: https://github.com/tomalex0/SenchaTouch-v2-SqliteProxy/issues/3
Adding the id field to the fields array will cause the proxy to create the database table with column id as an AUTOINCREMENT field.
Ext.define('EvaluateIt.model.Address', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'address', type: 'string'},
{name: 'city', type: 'string'},
{name: 'state', type: 'string'},
{name: 'zipcode', type: 'string'},
{name: 'county', type: 'string'}
],
proxy: {
type: "sql",
database: 'Test'
}
}
});
The proxy will read the id value created by the database. You can access the value by passing a callback function to the model save method.
var address = Ext.create('EvaluateIt.model.Address', {
address: json[i].garden.address.address
});
address.save(function(record) {
console.log('address.id ' + record.getId();
}, this);

extjs model custom mapp to xml

My model has clientName model/AlertConfig.js:
Ext.define('ET.model.AlertConfig', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'clientName', type: 'string' },
{name: 'description', type: 'string'},
Incoming xml has the whole client object embedded (if present):
<alertConfig>
<commandType>D</commandType>
<countThreshold>1</countThreshold>
<description>Distributions that failed(all clients)</description>
<id>2</id>
<processTimeExceedsSec>0</processTimeExceedsSec>
<status>3</status>
<windowMinutes>120</windowMinutes>
</alertConfig>
<alertConfig>
<client>
<clientCategory>abc</clientCategory>
<clientExtId>12345</clientExtId>
<clientId>1</clientId>
<clientName>MyClient1</clientName>
<lastModified>2013-03-19T16:12:54.774-04:00</lastModified>
</client>
<commandType>R</commandType>
<countThreshold>1</countThreshold>
<description>Requests that failed</description>
<id>3</id>
<processTimeExceedsSec>0</processTimeExceedsSec>
<status>3</status>
<windowMinutes>120</windowMinutes>
</alertConfig>
QUESTION:
I need only the alertConfig/client/clientName to be mapped to clientName in model. How can I do it cleanly. Is there a place where I can mention this xml path?
Note: In the view User will see the ClientName (and all clientNames in a combobox, user may choose&update with a different clientName for the alert.)
Resolved by adding '/'
Ext.define('ET.model.AlertConfig', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'clientId', mapping: 'client/clientId', type: 'int' },
//not a field in erf.domain (but points to Client object)
{name: 'clientName', mapping: 'client/clientName', type: 'string' }, // not a field in erf.domain
{name: 'description', type: 'string'},

Where's my EXT JS 4 model data?

Using Ext JS 4.1....
I have a grid that displays a bunch of Model instances, although only some of the fields are displayed. I then have a double-click listener where I would like to load the entire record into a form for editing. In the double-click listener I do not see the data in my hasMany association although the json data is being returned according to Firebug's Net display where I see the response from the server call. Is there something wrong with my model or am I going about this wrong?
Request.js
Ext.define('Request', {
extend: 'Ext.data.Model',
requires: ['PointOfContact'],
fields: [
{name: 'id', type: 'int'},
{name: 'project', type: 'string'},
{name: 'purpose', type: 'string'},
{name: 'status'},
{name: 'additionalInfo', type: 'string'}
],
hasMany: [{
model: 'PointOfContact',
name: 'pointOfContacts',
foreignKey: 'id',
associationKey: 'pointOfContacts'
}],
proxy: {
type: 'rest',
url: '/web/project/rest/request/',
reader: { type: 'json' },
writer: { type: 'json' }
}
});
PointOfContact.js
Ext.define('PointOfContact', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'fullName', type: 'string'},
{name: 'email', type: 'string'},
{name: 'phone', type: 'string'}
]
});
Requests.js
Ext.define('Requests', {
extend: 'Ext.data.Store',
model: 'Request',
autoLoad: true
});
RequestsView.js
Ext.define('RequestsView', {
extend: 'Ext.grid.Panel',
title: 'All Requests',
store: 'Requests',
viewConfig: {
singleSelect: 'true',
listeners: {
itemdblclick: function(dataview, record, item, index, e) {
console.log(record.get('project'));
console.log(record.get('purpose'));
console.log(record.get('status'));
console.log(record.get('additionalInfo'));
console.log(record.get('pointOfContacts'));
var comp = Ext.ComponentQuery.query('requestForm');
comp[0].getForm().loadRecord(record);
var mainPanel = Ext.ComponentQuery.query('mainpanel');
mainPanel[0].getLayout().setActiveItem('requestForm');
}
}
},
columns: [
{header: 'Project', dataIndex: 'project', flex: 1},
{header: 'Purpose', dataIndex: 'purpose', flex: 1},
{header: 'Status', dataIndex: 'status', flex: 1}
]
});
So in the console I see the values for project, purpose, status and additionalInfo but I get "undefined" for pointOfContacts.
Any suggestions?
UPDATE WITH FINAL WORKING CODE:
Here is the working code I used to retrieve the pointofContacts and load a grid on my form panel with the pointOfContacts
...
itemdblclick: function(dataview, record, item, e) {
var comp = Ext.ComponentQuery.query('requestForm');
comp[0].getForm().loadRecord(record);
Ext.getCmp('pocGrid').reconfigure(record.pointOfContacts());
var mainPanel = Ext.ComponentQuery.query('mainpanel');
mainPanel[0].getLayout().setActiveItem('requestForm');
}
....
Has many associations are not parsed in to associated records by default. Especially for the grid - as that is supposed to be a flat data view. Model docs show you how to setup associations but don't say anything about creating instances for you :)
There are links to usage of has many (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.association.HasMany) from the Model docs. Unfortunately the usage is not what you expect it to be. Essentially it is designed to fetch the records on demand by calling their store to load.

Belongs to association in Sencha

How can i fetch a record using belongs to association ?
var Category = Ext.regModel('Category', {
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
var Product = Ext.regModel('Product', {
fields: [
{name: 'id', type: 'int'},
{name: 'category_id', type: 'int'},
{name: 'name', type: 'string'}
],
associations: [
{type: 'belongsTo', model: 'Category'}
]
});
Amol,
I speak only of ExtJS 4, so if you can relate this to ExtJS 3 then great, but you would retrieve multiple records via a store:
As a starting point though you could do
var records = Ext.StoreManager.lookupStore("productStore").load({
belongTo: 'books',
callback: function(records) {
Ext.each(records,function(record) {
console.log(JSON.stringify(record.raw))
});
}
});
Depending on the proxy setup on the productStore, this will append belongTo to the querystring so if reader proxy has url: /products and the extra params belongTo is sent this will hit the server with /products?belongTo=books

How to access nested models from store in ExtJs 4

I just downloaded the final version of ExtJs 4 and I'm trying to implement some things using new Model approach.
For instance I have a model named SetupModel, it has 2 nested models Users, Reports.
I create new store and I set the Model property of the store = SetupModel.
The question is - how can I access my nested properties after data was loaded into the store?
I need something like myStore.data.Users(), but is incorrect.
Any thoughts?
When you define your model, you need to provide the necessary association with the nested models. Since, you have not provided your code. Here is an example:
My Product Model:
Product = Ext.define('Product',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'user_id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'price', type: 'float'}
],
proxy: {
type: 'localstorage',
id: 'products'
}
});
My User Model:
User = Ext.define('User',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'gender', type: 'string'},
{name: 'username', type: 'string'}
],
associations: [
{type: 'hasMany', model: 'Product', name: 'products'}
],
proxy: {
type: 'localstorage',
id : 'users'
}
});
Now, if you have a instance of User model with products. Here is how you can access the products:
var productStore = user.products();
Note that user.products() returns a Ext.data.Store. Now, you can traverse or filter or find your product record. Here is how I got my first product's name:
productStore.getAt(0).get('name');

Resources