How to add records in json-store - extjs

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

Related

How can I Add and Delete nested Object in array in Angularjs

heres my output Image html How can I delete Object in array and push when adding some Data
angular.module('myApp.Tree_Service', [])
.factory('TreeService', function() {
var svc = {};
var treeDirectories = [
{
name: 'Project1',
id: "1",
type: 'folder',
collapse: true,
children: [
{
name: 'CSS',
id: "1-1",
type: 'folder',
collapse: false,
children: [
{
name: 'style1.css',
id: "1-1-1",
type: 'file'
},
{
name: 'style2.css',
id: "1-1-2",
type: 'file'
}
]
}
]
}
];
svc.add = function () {}
svc.delete = function (item, index) { }
svc.getItem = function () { return treeDirectories; }
return svc;
});
})();
I'm Newbee in Angularjs and I don't know how much to play it.
Hopefully someone can help me. Im Stucked.
Well you can delete any object by just usingdelete Objname.property
So for example you want to delete Children in treeDirectories first index object you can use delete treeDirectories[0].children if you want to delete children inside children then delete treeDirectories[0].children[0].children
if you want to remove an index from an array in lowest level children then
treeDirectories[0].children[0].children.splice(index,1)
for pushing data is for object you can directly assign value to the property you want
treeDirectories[0].children[0].newproperty = "check"
And for array you can
treeDirectories[0].children[0].children.push(object)

Map depends on dynamic variable

I have following hardcoded map:
$scope.lists = {
test1: [
{ name: 'My Name' }
],
test2: [
{ name: 'My Second Name' }
]
};
$scope.selectedList = "test1";
Then inside my pug/html file:
div(ng-repeat="list in lists.selectedList")
What I need is I want to have array to be selected depend on var of selectedList. Am I able to do that in AngularJS?
You can use square-bracket syntax in angular attributes:
div(ng-repeat="list in lists[selectedList]")

extjs store.load not populating, possibly root object issue?

I am having trouble loading my first ExtJS store.
var testStore = Ext.data.StoreManager.lookup('myUserStoreID');
testStore.load({
callback: function (records, operation, success) {
testStore.each(function (record) {
debugger;
var task = record.data.description;
console.log(task);
});
//debugger;
//var x2 = operation._response;
//var x3 = x2.responseText;
//var x4 = Ext.decode(x3);
////var x3 = Ext.JSON.decode(operation);
////var x2 = Ext.decode(operation.response);
//console.log(testStore);
}
});
In debugger I can see the correct data if I drilldown into operation._response.responseText, but the records are blank. So I know it just has to do with my code. If I use the Ext.decode it does return an object. What am I doing wrong that the return data automatically populates my store.
Here is a picture of the object in fiddler.
here is the Model I am trying to use... I know it doesn't have all the fields yet.
Ext.define('ExtApplication1.model.UserModel', {
extend: 'ExtApplication1.model.Base',
requires: ['ExtApplication1.model.Base'],
fields: [
/*
The fields for this model. This is an Array of Ext.data.field.Field definition objects or simply the field name.
If just a name is given, the field type defaults to auto. For example:
*/
{ name: 'UserID', type: 'int' },
{ name: 'UserName', type: 'string' },
{ name: 'password', type: 'string' },
{ name: 'Email', type: 'string' },
{ name: 'GroupID' }
],
proxy: {
type: 'ajax',
url: 'http://localhost:49537/api/user/gettargetuser/xxx/xxx',
reader: {
type: 'json',
rootProperty: 'JSON'
}
}
Here is my User class in webapi
here is the MainModel.js where I create stores
Ext.define('ExtApplication1.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'ExtApplication1',
appName: xxx,
appHeaderIcon: '<span class="fa fa-desktop fa-lg app-header-logo">',
footer: 'Copyright - xxx- x
},
stores: {
sessionListByInterest: {
model: 'MainMenuListModel',
autoLoad: false //was true
},
myUserStore: {
model: 'UserModel',
storeId: 'myUserStoreID',
autoLoad: false
},
The issue is that the store expects rootProperty to contain an array of records, while you are only delivering a single record.
If you want to only load a single record, which is not in an array, you would have to use the static model.load() function.
Or you can change your API endpoint from User JSON to List<User> JSON (or IEnumerable<User> or ICollection<User> or User[]...), even if you intend to only return a single user. Doesn't matter how many records there are in the JSON array, but the array is expected by ExtJS store.

Possible circular reference in mongoose

I have a problem with circular dependency when I need to SAVE a 'document'.
My application is all Restfull with the interface via AngularJS.
On the screen to create a COMPANY, you can create OBJECTS and SERVICES. In the creation of the SERVICES screen, it must associate a created OBJECT.
The problem is that the OBJECT created has not yet persisted, so I don't have a _id. Thus it is not possible to reference it in SERVICE. Only when I have an OBJECT persisted, I can associate it in company.services[0].object.
Any suggestion?
This is what I need to be saved in MongoDB. Look at the reference to the OBJECT "5779f75a27f9d259248211c7" in SERVICE.
/* 1 */
{
"_id" : ObjectId("5749bb92bf8145c97988e4a9"),
"name" : "company 1",
"services" : [
{
"_id" : ObjectId("5764cb2c00d00cf10c9c41c6"),
"description" : "service 1",
"object" : ObjectId("5779f75a27f9d259248211c7"),
}
],
"objects" : [
{
"_id" : ObjectId("5779f75a27f9d259248211c7"),
"description" : "object 1",
}
]
}
And this is my Schema:
var objectSchema = new mongoose.Schema({
description: {
type: String,
trim: true,
unique: true,
required: 'Description is required'
}
})
var serviceSchema = new mongoose.Schema({
description: {
type: String,
trim: true,
required: 'Description is required'
},
object: {
type: mongoose.Schema.ObjectId,
ref: 'Object'
},
})
var companySchema = new mongoose.Schema({
name: {
type: String,
default: '',
trim: true,
unique: true,
required: 'Name is required'
},
guarda_documentos: {
services: [serviceSchema],
objects: [objectSchema],
},
});
mongoose.model('Company', companySchema);
mongoose.model('Object', objectSchema);
You would need to persist your object first and once this is done, use the returned _id to then persist your service. This is an async process.
// Simplified code concept
// Create a new object
var o = new Object()
o.description = 'foo'
...
// Create a new service
var s = new Service()
// Save object and return it (will now have an _id)
o.save(function(err, doc) {
// Add object reference to service and save
s.object = doc._id
s.save(function(err, res) {
// Call your controller or whatever callback here
})
})
On another note don't use "Object" as the name of your doc. It already defined in Javascript.

ExtJS 4 Show data from multiple stores in grid

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

Resources