Create a view to display nested data - extjs

My Model
config:{
fields: [
{ name: 'AcctManagFirst', type: 'string' },
{ name: 'AcctManagLast', type: 'string' },
{ name: 'Name', type: 'string' },
{ name: 'Terms', type: 'string' },
{ name: 'Freight', type: 'string' },
{ name: 'Taxable', type: 'string' },
{ name: 'Taxtable', type: 'string' },
{ name: 'TaxTableRate', type: 'string' },
{ name: 'BillToAddr', type: 'string' },
{ name: 'BCity', type: 'string' },
{ name: 'BState', type: 'string'},
{ name: 'BZip', type: 'string' },
{ name: 'WHAddr', type: 'string' },
{ name: 'WHCity', type: 'string' },
{ name: 'WHState', type: 'string' },
{ name: 'WHZip', type: 'string' },
and my store
config:{
model: 'Sample.model.User',
proxy:
{
type: 'jsonp',
url: 'http://xxx.xxx.com/customer_info.php',
buildUrl : function (request) {
var url = this.getUrl(request),
params = request.getParams() || {};
url = url + params.CustNo;
request.setUrl(url);
return this.callParent([request]);
},
reader: {
type: 'json',
rootProperty: 'content'
}
}
I will get the user data from the store... how to write a view that display data with respect to the user.. user data changes .. now I can write the static data but I need the data to be dynamic..

Firstly, your question is awfully vague and difficult to answer.
I think what you're trying to accomplish is to have a list populated dynamically from your store which when tapped will display a detail view.
You'll need to put together a list view to display your data as well as a container for the detail view.
You will also need a controller with a reference to both views and a control on the list view's itemtap event. The method called from that control should set the data into your detail view then push that view onto the Viewport.
I can be more specific but as I mentioned this question is too vague to put together any kind of example for you. Adding a hardcoded set of data to your store would help, as well as full class examples of your views, stores, controllers and models.

Related

Kendo Grid DateColumn show NaN/NaN/NaN

In every grid (Kendo for AngujarJs) on my project that contains a DateTime value I'm getting this NaN/NaN/NaN
Here is my schema:
schema: {
model: {
id: 'RequestId',
fields: {
RequestId: { type: 'number' },
RequestNumber: { type: 'number'},
FileNumber: { type: 'string' },
RegistrationDate: { type: 'datetime' },
RequestStatus: { type: 'string' },
UnitName: { type: 'string' }
}
}
}
I've tried with RegistrationDate: { type: 'string' }, or RegistrationDate: { type: 'date' }, but nothing change, also I tried this on my columns:
{
field: 'RegistrationDate',
title: 'Fecha de Registro',
type: 'date'
},
Or type: 'datetime' and nothing.
Here is what I get from the server:
Any idea on how to make it work? Its pretty basic to show a Date in a grid, I know, in other projects I have no problem, but as you can see, I tried all I could think of.
Try this:
{
field: 'RegistrationDate',
title: 'Fecha de Registro',
format: "{0:yyyy-MM-dd HH:mm:ss}"
}

Extjs localstore method set

I am not able to update record in localStorage by id. I get the exception :
Uncaught TypeError: Cannot read property 'type' of undefined WebStorage.js:391Ext.define.getIds WebStorage.js:391Ext.define.update WebStorage.js:190Ext.define.runOperation Batch.js?_dc=1423751003307:251Ext.define.start Batch.js?_dc=1423751003307:178Ext.define.batch Proxy.js?_dc=1423751002203:456Ext.define.sync AbstractStore.js?_dc=1423751002173:810Ext.define.afterEdit AbstractStore.js?_dc=1423751002173:906Ext.define.callStore Model.js?_dc=1423751003310:1814Ext.define.afterEdit Model.js?_dc=1423751003310:1773Ext.define.set Model.js?_dc=1423751003310:1175(anonymous function) Main.js?_dc=1423751002786:26(anonymous function) VM3763:6wrap
My model is simple:
Ext.define('AM.model.Points', {
extend: 'Ext.data.Model',
idProperty: {
name: 'UUID',
type: String,
isUnique: true
},
fields: [
{
name: 'NO',
type: "string"
},
{
name: 'Y',
type: "int"
},
{
name: 'ROW',
type: 'int'
},
{
name: 'SEAT',
type: 'string'
},
{
name: 'PROCEEDED',
type: 'int'
},
{
name: 'X',
type: "int"
},
{
name: "CurrentPlace",
type: "int",
defaultValue: 0
}
],
});
My controller class init function:
init: function(){
// метод getStore контроллера возвращает экземпляр хранилища,
// если он уже создан - или создаёт его
console.log('Main controller init function()');
var changingImage = Ext.create('Ext.Img', {
src: '/is-bin/intershop.static/WFS/EnterpriseOrg-MainChannel-Site/ProductStore/ru_RU/kzch.jpg',
renderTo: Ext.get('canv1')
});
Ext.get('canv1').on('click', function(eventObj, elRef) {
var index = Ext.StoreMgr.lookup("LocalStore").findExact('UUID',AM.util.Utilities.CurrentPlace);
var rec = Ext.StoreMgr.lookup("LocalStore").getAt(index);
console.log('Ext.StoreMgr.lookup("LocalStore") ' + Ext.StoreMgr.lookup("LocalStore"));
console.log('index' + index);
console.log('rec' + rec);
var uuid = rec.get('UUID');
console.log('uuid is: '+uuid);
**rec.set('X', window.event.offsetX);**
});
The logic is that I click on canvas and pass X coordinate of the click to method on click. I retrieve model from store by previously saved id to update it. But I cant update record. What should be done? Version 4.2.1 Thanx in advance.

Creating a model for two jsonarray

demoAlerts({
itemstatus: [
{
item: "1",
name: "apple",
type: "fruit"
},
{
item: "2",
name: "pine",
type: "fruit"
}
],
deliverystatus: [
{
name: "james",
status: "yes"
},
{
name: "thomas",
status: "no"
},
]
});
I have two array (itemstatus and deliverystatus), I need to create the model for this store. what I tried is
ParentModel:
Ext.define('test.model.ParentModel', {
extend: 'Ext.data.Model',
requires:['test.model.ItemModel','test.model.DeliveryModel'],
autoLoad: true,
config : {
fields : [ 'itemstatus', {
name : 'demostatuslist',
model : 'demoAlerts.model.ItemModel',
mapping : 'itemstatus'
},
'portalstatus', {
name : 'deliverystatus',
model : 'test.model.DeliveryModel',
mapping : ' deliverystatus'
}]
}
});
ItemModel
Ext.define('demoAlerts.model.ItemModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'item', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' }
]
}
});
DeliveryModel
Ext.define('demoAlerts.model.DeliveryModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'name', type: 'string' },
{ name: 'status', type: 'string' },
]
}
});
Whether i properly configured the model. I am receiving the store as empty
Use Associations :) http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.association.Association
In this case I would have a Model with 2 hasMany associations like this:
Ext.define('demoAlerts.model.ContainerModel', {
extend : 'Ext.data.Model',
requires : [
'demoAlerts.model.DeliveryModel',
'demoAlerts.model.ItemModel'
],
config : {
associations: [
{
type : 'hasMany',
model : 'demoAlerts.model.DeliveryModel',
associationKey : 'deliveryStatus',
name : 'deliveryStatus',
autoLoad : true // this is very important
},
{
type : 'hasMany',
model : 'demoAlerts.model.ItemModel',
associationKey : 'itemStatus',
name : 'itemStatus',
autoLoad : true // this is very important
}
]
}
});
Then use a store SomeStore binded to ContainerModel.
IMPORTANT Each record in SomeStore will have deliveryStatusStore and itemStatusStore AUTOGENERATED.
Read about associations.
Neither http://docs.sencha.com/touch/2.3.1/#!/api/Ext.data.Field
nor http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.field.Field
knows a valid config option "model" for a field.
As far as I know, there is no such thing as a "Parent Model" available in ExtJS or Sencha Touch.
As far as I know, there is no possibility to have two stores in one.
You can load two (or more) stores using only one call to the server like in my following example:
firststore.on('load',function() {
secondstore.loadRawData(firststore.getProxy().getReader().rawData);
});
firststore.load()
Where you would give firststore the server url and the root of the data that goes into the first store, and secondstore will have the root of the data that goes into the second store.
Please be aware that the second store won't be filled if zero records go into the first store, and choose your stores appropriately.
If any of your stores can be the only empty store, perhaps you will have to get the rawdata via Ext.data.Request and load it into all stores afterwards.

ExtJs4 How to assign a model to a store at creation?

I'm defining a store and I want to dynamically assign a Model for it at creation. So if I create my DropDownStore and I don't pass a model config with it it needs to rely on the default model(DropDownModel).
Here is my DropDownModel + DropDownStore:
Ext.define('DropDownModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
]
});
Ext.define('DropDownStore', {
extend: Ext.data.Store,
proxy: {
type: 'ajax',
actionMethods: { read: 'POST' },
reader: {
type: 'json',
root: 'data'
}
},
constructor: function(config) {
var me = this;
if (config.listUrl) {
me.proxy.url = config.listUrl;
}
me.model = (config.model) ? config.model : 'DropDownModel'; //This line creates some weird behaviour
me.callParent();
//If the URL is present, load() the store.
if (me.proxy.url) {
me.load();
}
}
});
This is a creation of the DropDownStore with a dynamic model:
Ext.define('RelationModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'RelationName', type: 'string' },
{ name: 'RelationOppositeName', type: 'string' }
]
});
...//a random combobox
store: Ext.create('DropDownStore', {
listUrl: 'someprivateurl',
model: 'RelationModel'
})
...
When I edit the line in the constructor method to
me.model = (config.model) ? config.model : undefined
It works like expected for the dynamic model but not anymore for the default models.
If I let it be
me.model = (config.model) ? config.model : 'DropDownModel';
It works for the default models and not for the dynamic model.
How can I assign a model to a store at creation?
constructor: function(config) {
var me = this;
if (config.listUrl) {
me.proxy.url = config.listUrl;
}
me.callParent();
if (config.extraFields) {
me.model.setFields(config.extraFields);
}
//If the URL is present, load() the store.
if (me.proxy.url) {
me.load();
}
}
store: Ext.create('DropDownStore', {
listUrl: 'someprivateurl',
extraFields: [
{ name: 'Id', type: 'int' },
{ name: 'RelationName', type: 'string' },
{ name: 'RelationOppositeName', type: 'string' }
]
}),

same store with diffrent data types in extjs

I have store which is used for grid and column chart but the values are in form of string (server side formatted amounts which cant be done at client side).due to which grid is not being rendered due to amount in string format.the solution might be make separate store with required data types for grid and chart.but this is inefficient way because same data is coming from server.
here is what i am doing
if (!window.GridModel) {
if (!Ext.ModelManager.isRegistered('GridModel')) {
Ext.define('GridModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'LocCode',
type: 'string'
}, {
name: 'LocLvl',
type: 'string'
}, {
name: 'LocName',
type: 'string'
},
{
name: 'cost1',
type: 'string'
}, {
name: 'Cost2',
type: 'string'
}, {
name: 'cost3',
type: 'string'
}
]
});
}
}
for chart (not deficient)
if (!window.chartModel) {
if (!Ext.ModelManager.isRegistered('chartModel')) {
Ext.define('chartModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'LocCode',
type: 'string'
}, {
name: 'LocLvl',
type: 'string'
}, {
name: 'LocName',
type: 'string'
},
{
name: 'cost1',
type: 'float'
}, {
name: 'Cost2',
type: 'float'
}, {
name: 'cost3',
type: 'float'
}
]
});
}
}
one way might be copy one store into another with changed data type of fields but i don't know how to copy one store into another with changed data type of fields.
I am using ExtJS 4.0.7
You can have different types in the same store, but you have to load them manually, or use some trickery when loading.
Not sure if you can have totally different types, but you can use different subtypes.
Here is an example of changing store type on the fly based on the response:
http://extjs-tutorials.blogspot.ca/2012/06/polymorphic-json-change-model-subclass.html

Resources