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.
Related
Creating an eCommerce type react application and part of it is merchants can create product listings(item title, item description, item price, etc). How do I allow them to add options to the listing like Size, Color, etc. It seems more confusing than just having input fields that can change a state variable.
An example of what a completed array should look like after a user enters options:
const options = [
{
optionName: 'Size',
values: ['small', 'medium', 'large']
},
{
optionName: 'Color',
values: ['blue', 'black', 'white', 'tan'],
}
]
Above is how it should be constructed to be sent to server.
Let me know if any more clarification is needed.
What you're describing is dynamic form construction, and is always much more complicated than a static form. This is not an easy feature to implement.
What you've sketched out there as dummy API request data is essentially the solution -- you just need to provide UI that enables that solution. Presumably you have an object that holds all your form data, so you can add a field like userDefinedOptions that gets initialized with an empty array.
Then, you'll need UI elements to allow adding a new user-defined option, which will probably include the display name of the option, as well as the list of choices for that option. This UI would then call an event handler that inserts the inputted values into your list of user-defined options.
Dynamic forms can get very messy very fast, so I'd recommend looking into a form library to handle some of the overhead. You'll also need to validate the dynamic user data before sending it off to the API.
Hope that helps!
I've been searching for a while now and can't find any examples of how I could pass a custom value to a template I created with Schema Form. I needed to create a template to allow for the label to be aligned any way the user wants it to be. I got a simple version of the template working, now I need to give the template information like where the label should be aligned and how many columns the field should take so I can have multiple fields on a single row. I've tried passing my custom fields in the field definition and retrieving it in the template from the form object.
firstName = {
labelAlign: "left"
title: "First Name"
type: "string"
}
In the sample labelAlign is the custom field that I want to access through the form object and this is part of the data that is passed through the sf-schema directive. Is there another way I can access this data in my template?
Thanks in advance.
UPDATE
If I pass the custom value in the form JSON instead of the schema JSON the value show on the form but it creates another field at the very end of the form which is not what I am looking for. I've seen schema form examples that show modifying fields in the form JSON without having this problem. Does anyone know how to make this work properly?
I found the answer to my question and want to post it here for others. The object I was looking for was form.schema. That will allow access to properties created in the schema JSON.
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.
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.
I'm using a store to fetch the specializations of all hikers (so hiker has many specializations). However, I have a detail window where this specializations are added/removed/shown ony for currently selected hiker (yea, it's a detail window).
My problem here is that my store fetch data for all hikers, but I want it to show, when detailed window is up, only data for given hiker. Notice also that I'm showing data in data-grid, so the user possibly can add filters and I noticed that if I add a filter with store.filter({...}) and user add a filter with data-grid, my filters are removed (so basically they are useless.
Which approach should I use? Do you have any suggestion? I were thinking about 1 store for each hiker, but I don't like this solution.
Edit 1:
I also noticed that I can't create a filter in the same way as data-grid builds them:
Ext.create('Ext.util.Filter', {
type: 'numeric',
comparison: 'eq',
field: 'hiker_id',
property: 'hiker_id',
value: me.hiker.get('id'),
root: 'data'
})
Which is boring, because I imnplemented on server side a functionality that parses the grid filters already.
We just give our filters in json format to the store's extra params. And parse that back-end. The extra params stay the same while paging or refreshing the grid.
grid.getStore().getProxy().extraParams = { filter: yourFilter };
-How- are your users doing the filter?
store.filter accepts both arrays and functions, so you can do quite a bit with it, without actually juggling the data on the server. (eg manage an array that is being passed to the filter, test against an object somewhere, or whatever)
Permanent filter? Not so much, but since you can add multiple filters etc, it is relatively trivial to keep track of what filters are in place.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-filter