I am trying to add 2 member variables of Xtemplate.
I tried something like this
reader: new Ext.data.XmlReader({
record: 'RealTimeFlow'
},[
{name: 'successEvent', mapping: '#sEvents'},
{name: 'successLatency', mapping : '#sLatency'},
{name: 'failedEvent', mapping: '#fEvents'},
{name: 'failedPercent', mapping: '#fPercent'},
{name: 'failedLatency', mapping : '#fLatency'}
])
});
var RTFtpl = new Ext.XTemplate(
'<p align="left">Total Events:{[values.successEvent+values.failedEvent]}<br \>',.........................
If success event = 40 and failed event = 6
then the answer should be 44 ...... but by using the above I am getting 406
Any idea what I am doing wrong
That's because it is adding two strings together
'40' + '6' = '406' in Javascript
Try parsing them as numbers. You could use parseInt perhaps, or make sure that the values are numbers in your model.
fixed the problem
in the store added the type value to the variables
reader: new Ext.data.XmlReader({
record: 'RealTimeFlow'
},[
{name: 'successEvent', mapping: '#sEvents', type : 'int'},
{name: 'successLatency', mapping : '#sLatency'},
{name: 'failedEvent', mapping: '#fEvents',type : 'int'},
{name: 'failedPercent', mapping: '#fPercent'},
{name: 'failedLatency', mapping : '#fLatency'}
]),
newDate : new Date()
});
and
var RTFtpl = new Ext.XTemplate(
'<p align="left">Total Events:{[values.successEvent+values.failedEvent]}<br \>',
Related
I'm very new to extjs and I'm trying to get a simple XTemplate to work. I have two cases below. #1 works fine. The generated output is: 'One, 1' surrounded by the p tags. #2 doesn't work though. The output only produces the comma: ',' surrounded by the p tags. In short, I'm unable to deference/access the data from the store.
// 1. This one works
var data = {name: "One", age: "1"};
var tpl = new Ext.XTemplate(
'<tpl for".">',
'<p>{name}, {age}</p>',
'</tpl>'
);
var generatedHtml = tpl.apply(data);
console.log(generatedHtml);
// 2. This one doesn't work
var myStore = Ext.create('Ext.data.Store',{
fields: ["name", "age"],
data: [
{name: "One", age: "1"},
{name: "Two", age: "2"}
]
});
var tpl2 = new Ext.XTemplate(
'<tpl for".">',
'<p>{data.name}, {data.age}</p>',
'</tpl>'
);
var generatedHtml2 = tpl2.apply(myStore);
console.log(generatedHtml2);
I just realized I was missing the = after the for! When I put that in it worked.
I'm not sure why, but I can't get this to work.
var friends = new Backbone.Collection([
{name: "Athos", job: "Musketeer"},
{name: "Porthos", job: "Musketeer"},
{name: "Aramis", job: "Musketeer"},
{name: "d'Artagnan", job: "Guard"},
]);
friends.where({job: "Musketeer"}).toJSON()
I'm getting Uncaught TypeError: Object [object Object] has no method 'toJSON'.
What I'm I doing wrong and how do I convert my filtered collection into JSON?
What the Underscore.where method returns is an Array not a Backbone.Collection so it has not the toJSON method defined.
So you can make two things:
Iterate over elements and map the result:
var result = friends.where({job: "Musketeer"});
_.map( result, function( model ){ return model.toJSON(); } );
jsFiddle code
Implement a Collection searcher method that returns a proper Backbone.Collection:
var Friends = Backbone.Collection.extend({
search: function( opts ){
var result = this.where( opts );
var resultCollection = new Friends( result );
return resultCollection;
}
});
var myFriends = new Friends([
{name: "Athos", job: "Musketeer"},
{name: "Porthos", job: "Musketeer"},
{name: "Aramis", job: "Musketeer"},
{name: "d'Artagnan", job: "Guard"},
]);
myFriends.search({ job: "Musketeer" }).toJSON();
jsFiddle code
toJSON is a confusing method name : http://documentcloud.github.com/backbone/#Collection-toJSON
toJSON collection.toJSON()
Return an array containing the attributes hash of each model in the collection. This can be used to serialize and >persist the collection as a whole. The name of this method is a bit confusing, because it conforms to JavaScript's >JSON API.
if you want to convert your collection to a JSON string, use JSON.stringify
var friends = new Backbone.Collection([
{name: "Athos", job: "Musketeer"},
{name: "Porthos", job: "Musketeer"},
{name: "Aramis", job: "Musketeer"},
{name: "d'Artagnan", job: "Guard"},
]);
JSON.stringify( friends.where({job: "Musketeer"}) );
Note that where returns an array, not a Backbone collection, you would have to build a new collection to use the toJSON method.
How to get value from the Store by id?
store in such fields
fields: [
{name: "id", type: 'int'},
{name: "name", type: 'String'},...
I need to get the id - name value.
I try so:
var rec = Ext.StoreMgr.lookup("MyStore").getById(id);
alert(rec.data.name);
what am I doing wrong?
The function getById finds the record with the specified id which has nothing to do to with the id you specified in the fields config - Basically you're looking at record.id while you should be looking at record.data.id.
For 3.3.1 you should use:
var index = Ext.StoreMgr.lookup("MyStore").findExact('id',id);
var rec = Ext.StoreMgr.lookup("MyStore").getAt(index);
I have 2 models - for example - Users and Orders
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'username', 'firstName', 'lastName', 'state', 'city'],
associations: [
{
type: 'hasMany',
model: 'Order',
name: 'orders'
},],
});
Ext.define('AM.model.Order', {
extend: 'Ext.data.Model',
fields: ['id', 'userId', 'date', 'description', 'value'],
belongsTo: 'User',
});
and their stores. I'm looking for a way to display data from both stores in grid. (so my columns would be firstName, lastName, orderDate, orderDescription, orderValue...
What is the proper way to display them?
Thanks.
You should do this with your server side code and get this all data into a single store.
If you want to do this with associations, you need to define a renderer for your grid column.
Like so:
{
text: "orderDescription",
renderer: function(value,meta,record){//1.
//var orderStore = record.orderStore;//2a.
//var orderList = ordersStore.data.items;//2b.
var orderList = record.orders().data.items; //3.This line is the same as 2 the lines above(2a,2b).
var order = orderList[0]; //4. TODO..loop through your list.
var description = order.data.description; //5.
return description ;
},
I will try to explain for anyone who wants to do it this way.
The third parameter is the current record in your 'User' Store being renderd for the grid. The first two just need to be there, to receive record. Leaving them out will not work.
1a/1b. I left these there to demonstrate how the association works. Basically, each record in your 'User' Store gets its own corresponding 'ordersStore'. It will be called 'ordersStore', because you put in your association [name: 'orders'].
The orders() method is automatically created, again based on the name 'orders'. This just returns the orderStore. The store contains a field data -> which contains a field items. items is the actual list of orders.
Now you have access to your list of orders. You can loop trough the orders now. Or if you have only one order, just the first one.
Your order again contains a field data which contains your actual data.
Lets try with below example-
Step 1: Adding records from Store 2 to Store 2.
var store2 = new Ext.data.Store({
...
});
var store1 = new Ext.data.Store({
...
listeners: {
load: function(store) {
store2.addRecords({records: store.getRange()},{add: true});
}
}
});
Step 2: Using records from Store 2 with Store 1.
For example, the first data col comes from Store 1 and the data from Store 2 forms cols 2 and 3. You can use a renderer that finds the data in the second store if the 'other' columns are just 'lookup' data, e.g.:
var store1 = new Ext.data.Store({
...,
fields: ['field1', 'field2']
});
var store2 = new Ext.data.Store({
...
id: 'field2',
fields: ['field2', 'fieldA', 'fieldB']
});
var renderA = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldA') : '';
}
var renderB = function(value) {
var rec = store2.getById(value);
return rec ? rec.get('fieldB') : '';
}
var columns = [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field A', dataIndex: 'field2', renderer: renderA},
{header: 'Field B', dataIndex: 'field2', renderer: renderB}
];
Best of luck.
Ref. from here
var store = new Ext.data.JsonStore({
id:'jfields',
totalProperty:'totalcount',
root:'rows',
url: 'data.php',
fields:[{ name:'jfields' },
{ name:'firstyear' , mapping :'firstyear' , type:'float' },
{ name:'secondyear', mapping :'secondyear', type:'float' },
{ name:'thirdyear' , mapping :'thirdyear' , type:'float' },
{ name:'fourthyear', mapping :'fourthyear', type:'float' },
{ name:'fifthyear' , mapping :'fifthyear' , type:'float' } ]
}
});
What I want is to add data at the end for this store , but I am totally confused , what I did is I add the following code to it but not working.
listeners: {
load : function(){
BG_store.add([{"jfields":"Monthly","firstyear":22.99,"secondyear":21.88,"thirdyear":21.88,"fourthyear":22.99,"fifthyear":21.88}]);
}
}
But I do not think my concept are cleared ,Please any body show some way how to do it .
You need to define a record type, create it and at it, e.g:
TaskLocation = Ext.data.Record.create([
{name: "id", type: "string"},
{name: "type", type: "string"},
{name: "type_data", type: "string"},
{name: "display_value", type: "string"}
]);
Then:
var record = new TaskLocation({
id: Ext.id(),
type: "city",
type_data: "",
display_value: "Brighton"
});
Then:
my_store.add(record);
my_store.commitChanges();
Remember by the time the data is in the store it's not in the same format as you sent it down but in Record objects instead.
See the recordType property in the JsonStore. It's a function that can be used as a record constructor for the store in question. Use it like this:
var newRecord = new myStore.recordType(recordData, recordId);
myStore.add(newRecord);
I have also figured out a simple solution to this:
listeners: {
load: function( xstore , record , option ) {
var u = new xstore.recordType({ jfields : 'monthly' });
xstore.insert(record.length, u);
}
}
Here what I have to add is this listeners as when the data loads it will create the record type and u can add fields as data as many as u want