I am trying to understand how ExtJS associations work. I have not found an understandable tutorial on this issue that covers my main two use cases and especially how ExtJS differentiates between the two:
Association between two models through an "Id" reference.
Association between two models through a Parent-Child relationship.
I have laid the ground in this fiddle, can someone help me to fill in the gaps?
**fields: [
{name: 'AA', mapping: 'qq'},
{name: 'SS', mapping: 'pp'},
]**
The **name** you write the name given in gui part
eg:
{
xtype:'mytext',
label:'',
**name:'AA',**
editable:true
}
when you receive responses like this and in xml so the data is mapped like this:
*<wer>
<qq>data</qq>
<>data</>
</wer>*
so, we map the response data to name in gui.....
Related
I have an older project in Ionic v1 (Angular 1.x) where users can create groups and add members. I need to add a capability to the App for the group Admin to ask questions to group members - sort of a dynamic form. The questions can be of three types - a Yes/No (to be shown as a toggle), String (input Text) and a question with choices (to be shown as a select drop down). The number of questions can vary.
The questions are stored along the lines of the hash below.
{
id1: {q: "question1", type: "String"},
id2: {q: "question2", type: "Yes/No"}
id3: {q: "question3", type: "Choice", choices: "Choice1, Choice2, Choice3"},
id4: {q: "question4", type: "String"},
id5: {q: "question5", type: "Yes/No"}
id6: {q: "question6", type: "Choice", choices: "Choice4, Choice5, Choice6"}
}
I am trying to think of the best way to be able to show these questions dynamically to the user and collect the answers but not quite sure what's the best way to do this. I started looking at trying to create a Directive but wanted to get advice before spending too much time down a path.
Look forward to your thoughts and suggestions.
-S
I would suggest a simpler approach than using a directive, unless you have the need to reuse this as a component across multiple views. Start by having ng-repeat="(key, value) in questions" where questions is the name of your object. Then simply show/hide different forms for each question based on value.type: ng-if="value.type=='String'"...
The form you show in each case would be a checkbox for yes/no, textarea or input(type=text) for string and radio buttons for choice.
I'm not providing full code as I assume you know enough Angular to be able to create those - if not each case is an easy google away. One further thing you'll need is a place on each question for the model (i.e., the user's answer), which might be value.answer. For example:
<input type="checkbox" ng-model="value.answer">
Does this make sense?
I have the following store in my Sencha Touch 2.4.1 application:
Ext.define('NativeApp.store.Item', {
extend: 'Ext.data.Store',
config: {
model: 'NativeApp.model.Item',
storeId: 'item-store',
fields: ['id', 'description'],
proxy: {
type: 'ajax',
url: 'resources/json/item.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: true
}
});
It's being populated with everything in the JSON file, which let's say looks like this:
{
"items": [
{
"id": 's1',
'description': 'desc'
},
{
"id": 's2',
'description': 'desc'
}
]
}
Let's say that in my view I have two buttons, "s1" and "s2".
If I click on "s1", I am taken to a page with a list that contains the data with id "s1". (In this case, there is only one, but there could be more).
How would this be accomplished?
Idea 1:
The autoload attribute can be set to an Object. From here - "If the value of autoLoad is an Object, this Object will be passed to the store's load() method."
So if in my controller, in the handler that's executed when the button is tapped, I can generate this object (parse the JSON file) and somehow pass it to the store - mission accomplished. Sort of.
Besides the question of how to pass it to the store, the immediate problem is when is the data loaded into the store?
According to the docs, "this store's load method is automatically called after creation". Is creation when the app launches, or when I create the view object that uses the store:
var view = {xtype: 'myview'};
Idea 2:
Maybe I could dynamically switch out the url from the proxy and have separate JSON files for each id (there won't be too many). But that seems unlikely to work.
Idea 3:
Pass in a data object to the store (again parsing the JSON) from that controller.
Are any of these feasible? And if not, what is an alternative solution?Perhaps I'm overthinking this.
Edit:
I have a list of items, and each item has a list of sub-items. So when I select one item, I want to be taken to page of the sub-items. Right now, all of these sub-items are in one JSON file, so after clicking on one item, I need a way of telling the store to load only part of the json data.
Is Ext.data.model.load still the best approach?
Idea 1:
Yes, you could do that... probably more trouble than it's worth IMO. The store will load immediately after it is created -- so if you create the store at application start, then it loads then. If you create a store randomly during runtime, it loads then. If the store is defined inline for a view, it's loaded when the view is created.
Idea 2:
Arguably a better solution, but still a lot of trouble to swap the URL for the proxy, then forcibly load it, parse the data, etc.
Depending on your view, you could just directly load the data for a single model using NativeApp.model.Item.load(id) (see docs). This assumes you have an API setup for that, but it's easier IMO and certainly more RESTful.
Idea 3:
Meh. It really sounds to me like Ext.data.Store is the wrong construct for what you're trying to accomplish.
Are any of your ideas feasible? Yes.
Are you over-thinking this? Slightly, but then again you wouldn't be a programmer if you didn't.
It's hard to tell you exactly what I'd do without seeing the rest of your application and understanding the WHY you're doing X, Y, or Z... but if you're only planning on displaying a single model's data on a given "Detail" screen (and you need that data loaded on-demand), then the static Ext.data.Model.load() method is probably what you need.
Let me explain my situation:
I have model with array field inside it
Ext.define('MyModel',{
extend: 'Ext.data.Model',
fields: [
{ name: 'myfield', type: 'array' }
]
})
that contents data like this
data = Ext.create('MyModel',{
myfield: [ 'one', 'two', 'three', 'four' ]
})
I want to extend Ext.form.field.Base to create field that treats this array as todo-list and contains items inside itself ( Ext.form.field.Trigger to add "todo" and Ext.ListView to display "todo's" ).
I don't know how difficult it is to make Ext.form.field.Base contain items and are there any better possible solutions.
Field must get array on loadRecord() and give it on getRecord() of Form.
Other possible solutions I see:
1) Make Field only with html-template and vanilla-javascript ( bad because why to implement things that are already present in ExtJS )
2) Model relations ( bad because I have to implement 'create, update and delete' for each related model and load them manually )
Thank you for reading, any ideas are welcome!
Not related directly to your question, but "array" is not a valid field type for a Ext.data.Field. Use 'auto' for no data conversion, or just don't assign a type.
Re: the custom, complex form field, it's certainly possible with ExtJS, and creating an extension of the Trigger field is definitely what you'll want to do. Here's an example of a custom trigger field that handles complex data: http://existdissolve.com/2012/12/extjs-4-custom-editor-for-property-grid/. The example is for a custom property grid, but the principle is the same for any custom form field.
The most important parts in your custom field are going to be the implementation of the createPicker() method and whatever mechanism you define for setting the value of the underlying field.
Hope this gives you a good place to start.
Say I am building an API with a call that returns a collection of cities, each of which has a relationship to a state. A state has many cities, but a city has only one state.
I can imagine flattening the relationship and obscuring the underlying structure of the data like this,
{ cities : [
{ id: 1,
name: "Los Angeles",
state: "CA" }
]}
Or I can imagine structuring the JSON such that the relationship between cities and states is apparent,
{ cities : [
{ id: 1,
name: "Los Angeles",
state: { id: 1,
name: "CA" }
]}
The consumer of the API, as of now, only ever needs to know the name of the state. He does not need to know its ID or a way to get more information about the state. What are the pros and cons in structuring the JSON in either way?
In my opinion you should not add useless information to you api, but as #kgb said if your api is prone to be expanded you should design it that way. You asked about the relationship between the cities and states, and in my opinion this relationship is already defined in both of them.
So if you are 100% sure your api will not expand the state functionality, you should go with option 1. If there is only a slight chance, i propose you do this:
{ cities : [{
id: 1,
name: "Los Angeles",
state: { name: "CA" }
}]
}
That depends on the other consumers. Do you have any? Are you planning to?
An API is a machine interface, it is equally easy for the consumer's developer to use both structures. If the "state" entity is not a compound entity(no usable properties except name), it might me a good idea to show just the name, not a structure with the id.
If there is a possibility that state id might be useful in future, or a possibility that a new property is going to be added to state entity, then you should use the second approach from the start. Changing API in any way breaks the software already written, so changing it will make you support two different versions. Change between approaches 1 and 2 is not backward-compatible.
I would go with approach 2. It is not much more complex than 1 and leaves a possibility to extend state entity.
There is also a third approach. But it is noticeably more complex(and more extendable). Return state id only and create a method for state entity retrieval.
I'm new to Extjs 4 and I'm trying to understand how to create a model for data that has nested objects.
Example Data:
{
data1:{
field1:1,
field2:2,
**objField1**:{
objField1:1,
objField2:2,
**anotherObj**:{
field1:1,
field2:2,
arrayofObjs:[
{
//...
},
//...
]
}
},
objField2:{
//... Some more fields or objects
},
data2:{
//...
}
}
I'm trying to understand how I would model this data. The fields are easy
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'field1', type: 'int'},
{name: 'field2', type: 'int'}
], //...
But how do you model the objects? I was thinking I could create a model for the sub-objects and setup associations, but after reading the documentation, they seem to need to have IDs. So if you look at the belongsTo page, "The owner model is expected to have a foreign key which references the primary key of the associated model".
I'm not looking to model data that has foreignkey relationships, just objects with sub-objects. So the server might return one JSON object with multiple sub-objects, and one of those objects I might want to tie to a grid, another object's data to a selectbox, etc.
Thanks!
I think you have several problems here.
First, Models in Ext JS are mostly used to represent relational data, i.e. rows in SQL database. You can twist them to do whatever you want, but that doesn't mean it would be easy and there's always the question of "what for".
Second, Ext.data.Model is not suited at all for representing tree-like structures; you can use Ext.data.NodeInterface for that. NodeInterface is kinda class override for Model, a mixin in part, and generally is quite kludgy and rigid thing. The bright side is that it works, and the down side is that there's no other class that does the same stuff.
Next, nested data objects do not necessarily mean that they're actually related to each other. You said you want to pluck objects from one global JSON response; this can be done easily by configuring multiple Stores with different Readers and feeding them the same JSON object.
OTOH, the data structure looks a bit convoluted. Is that an attempt at preliminary optimization on the server side? I.e., put all stuff we might need into one huge JSON to save on server hits? If so, take a look at Ext.Direct remoting; it can save you from lots of headache down the road.