Loading Model from another model file in extjs - extjs

formGrid=me.abstractComponent.query('grid[itemId=grid]')[0],
Objmodel= Ext.create('Ext.document.model.GridModel');
formStore = Ext.create('Ext.data.Store',{
model:Objmodel,
data: data
});
formGrid.bindStore(formStore);
formStore.load();
I've been trying to load the store using the model, but error occurs saying that model not found. Is there any way such that i can load the model from another file in store above?

Store model attribute means you have to give the definition of Model not instance of model
Ext.define('app.model.User', {
extend: 'Ext.data.Model',
fields: ['first', 'last']
});
var store = Ext.create('Ext.data.Store',{
model: 'app.model.User'
});
Now if you want to add data to grid using model
var model = Ext.ModelManager.create({
first: 'Ed',
last: 'Spencer'
}, 'app.model.User');
store.add(model)

Related

Collection inside a Backbone model

I want to create a Backbone model and store a collection of another model into its property. So, there are parent and child model. Each parent has one or more children stored as an array inside its property.
The JSON will be like this.
Parent = {
name: 'Name',
age: 'Age',
children:
[{name: 'Name', age: 'Age'},
{name: 'Name', age: 'Age'},
{name: 'Name', age: 'Age'}]
}
I've tried to create both model and insert one inside the other but still has no solution. And I don't want to use parse or other server things.
So, is there any solution or better way to achieve that?
As I understand you want to create a model with this data and if there are children inside model to make a collection of same models inside.
var Person = Backbone.Model.extend({
initialize: function(){
this.set('children', new Persons(this.get('children')));
}
});
var Persons = Backbone.Collection.extend({
model: Person
});
On the model creation - initialize: function () {...}
Lets take our children array - this.get('children')
And make a collection - new Persons(...)
Collection will create models itself
And put everything back - this.set('children', ...);
JSFiddle - run and see result in console.

How to set the Id field of an ArrayStore (So that records can be looked up by the value of that field) in ExtJS 3

I am having trouble with Ext.data.ArrayStore. I have one defined as so:
var store = new Ext.data.ArrayStore({
fields: [
'myIdField',
'myDataField'
],
idProperty: 'myIdField'
});
store.add(new store.recordType({
myIdField: 'a',
myDataField: 'SomeData'
}));
However, when I do
var myInsertedRecord = store.getById('a');
the value of myInsertedRecord is 'undefined'.
Am I misunderstanding how does the setting o the record id work?
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.ArrayStore does not have an idProperty.
Try creating a Model, specifying the idProperty in the Model. Use that model to create your store.
Example:
Ext.define('MyData', {
extend: 'Ext.data.Model',
fields: ['myIdField', 'myDataField'],
idProperty: 'myIdField'
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'MyData'
});
store.add({
myIdField: 'a',
myDataField: 'SomeData'
});
var myRecord = store.getById('a');
I know this is an old thread, but I'll answer it anyway ...
The issue is the way you are creating the new record to add to the store. Have a look at the Ext.data.Record-static-method-create function. You will see that it can take an optional ID parameter.
So, to make your above example work, you'll need to add the record to the store like so:
store.add(new store.recordType({
myIdField: 'a',
myDataField: 'SomeData'}, 'a'));
Notice the last 'a', that's where you apply the ID to the record.
After that, your added record will have an ID so store.getById('a') will work for you.

Use localstorageProvider and localstorageProxy in extjs4

i try to use a combination of Ext.state.LocalStorageProvider and Ext.data.proxy.LocalStorage anyone know a way to do that?
In my app (is use extjs 4.2) i initialize the localStorageProvider in this way:
var storageProvider = new Ext.state.LocalStorageProvider( {prefix: 'sample'});
Ext.state.Manager.setProvider(storageProvider);
With this configuration if i use stateful component all is save and reload.
The problem is came out when I had to introduce in my app a TabPanel with a dynamic set Tab dependent on the user's local session.
The tabs contain a set of information that I'm going to save in a LocalStorage proxy dataStore, but when I close the tabpanel the datastore is deleted, as if it were a memoryproxy datastore.
There is a way to transfer the datatstore in a state manage by the Ext.state.LocalStorageProvider?
Any kind of help is usefull.
[EDIT]: This is my code for localstorageStore.
Ext.define('Book', {
fields: ['id', 'name', 'layout'],
extend: 'Ext.data.Model',
});
var layoutStore = Ext.create('Ext.data.Store', {
model: "Book",
proxy: {
type: 'localstorage',
id : 'sample'+'_books'
}
});
For add element in my store, i use:
store.add(newElement);
store.synch();
For edit element for example only a field, in the store:
var record = store.getAt(index);
record.data.layout = encodeValue;
store.insert(index, record);
and for remove element i use
store.remove(record);
store.sync();

using Backgrid and Backbone-relational

I have a model which has HasMany items in it.
var Checklist = Backbone.RelationalModel.extend( {
url: {{ url }}
relations: [ {
type: Backbone.HasMany,
key: 'items',
relatedModel: ChecklistItem,
collectionType: ChecklistItemCollection,
}],
});
I instantiate the model var checklist = new Checklist();
now I initialize Grid and fetch the checklist.
var grid = new Backbone.Grid({columns:columns, collection: checklist.get('items'));
checklist.fetch({reset:true});
I can see in Checklist's parse method that it has retrieved data from the server.
But the grid view doesn't show any data for it.
(When I used plain Backbone.model instead of backbone.RelationalModel, everything worked fine. So I know my setup is correct other than the backbone-relational + backgrid interaction is missing)
I'm new to backbone/javascript/backgrid/... world
I guess I need to hook up some events to make it work.
Please share an insight!

backbone.js: define an initial set of models when creating a collection

I'm creating a backbone view for displaying a list of folders created by user in my webapp. but I want to have a default entry like no folder to be displayed in the list as well.
Instead of inserting the DOM inside the view, I want to just add a model to the collection which does not get synced to server but is just used to be rendered in the view.
Is there a way I can do this? I tried this an failed...
var def = {'name': 'none', 'selected': 'true'};
var coll = new app([def]);
// model here
var appitem = Backbone.Model.extend({
defaults: {
name: '',
id: '',
selected: 'false'
}
});
// collection here
app = Backbone.Collection.extend({
model: appitem,
url: '/apps'
});
You should not alter your models based on what the view needs.
If you need to display a 'no folder' entry, than it belongs in the view.
Don't complicate your life by adding data without meaning to the model layer. Keep it in the view.

Resources