How can I post a FormPanel as well as an EditorGrid ( Grid Panel) as a single JSON object in ExtJS with Rails 3.0.3?
For Ex: I have a FormPanel and a GridPanel, when it's submitted, it goes as a single JSON Store into the controller.
P.S: Any way to do that without using Arrays?
Thanks in advance !
you might want to split the submit event into two elements.
In other words, you can encapsulate the form and the grid on 2 separate elements you can check for all fields during the submit. That would create 2 separate post events.
However, why would you want to do that. you should just redirect the events of each individually as an action happens.
And no, extjs formats everything in a JSON that you would have to decode out to break the array.
Related
Hello I'm quite new to Kendo UI so my question is probably simple as well.
I am working with datasource of Kendo UI (Javascript) that reads a simple JSON object from a remote source, what works fine.
I struggle now with populating the data into single text fields within the HTML page. I find some example on Kendo UI documention talking about "template", "model", "columns", "binding", etc. but there is nothing I think I can adapt it to my needs. All examples I find are focussed on Kendo Widgets or "grid", what is not what I want.
Example:
I read the JSON by "datasource" object from remote source, looking like this:
[{"productid":"30","title":"apple"}]
In my HTML there are two input fields, one with ID="productid" and another one with ID="title"
I don't need a precise code solution just a hint/link how to proceed to populate the JSON elements into the value attributes of the two input fields. If this is possible is there also the other way possible like storing the values of the input fields back to a datasource and send it back to remote server for saving/updating purposes?
Any hint is welcome!
Is there a way to add data into a data store from a textfield based form?
for example:
Name:______
Team:______
Number:_____
Age:_______
when submitted injects into the data store?
You can use form.updateRecord() and then store.add(record).
But what you should really do is look at the examples that ship with ExtJS. There are lots of great ideas on how to do most things you need.
I have a filter that is used to populate a grid view and the url will conain: /example/grid?value1=1&value2=2
It will then have a link to page 2, which allows them to edit something.
I then want them to click a link that will send them back to the gridview under the same parameters of: /example/grid?value1=1&value2=2
Is this possible? How do I hold on and fill in the URL values so it knows how to refill the grid view accordingly??
Thank you!!
Well since you're using MVC, you should add parameters to your Grid controller that allow you to pass in parameters, then the url would look like this:
/example/grid/1/2
Then in your code you just need to read the parameters while you're filling the grid and apply the appropriate logic.
I am designing a highly complex data entry form using extjs 4.0. I am binding a model to my form.
Inside my model I am having a property say "Products" which represent the Product model. Now I want to show these products in Grid on my form Panel. User can add remove the products from the grid and save the form.
What is the best way to achieve this ?
If I understood you correctly you have a 1 to Many association of objects where the 1 side is loaded into a form for editing and the Many need to also be show but in a grid within the form.
The way I approached a similar design is by adding a gridpanel below the form. In my case there were other components so my grid was wrapped in a tabpanel. Similar to this example see form 5.
Now, what goes in the grid? Well I added a store representing my Many objects - or Products for your example. I setup a writer proxy for that store and added a roweditor plugin to the grid. The end result was an easy way for users to manage the relationships, edit properties of both parent and children objects all from one screen. I chose to have an autosync store for the Many store, but you dont have to. You can easily add a save button to the grid, or just bind the action to the parent's Save button.
Hope this get's your creative juices flowing :)
You could overwrite setValues(), getValues() methods of your form. Just add grid binding to the base methods. Note - no need to extend the form to create your own class. You could overwrite these functions right where you declare the form.
{
xtype: 'form',
setValues: function(){}
}
Hope this helped.
I've been working on this issue for about two days now. I've posted more task specific questions, got great answers, only to figure out the approach I was taking wouldn't work.
Basically, I want a user to be able to upload images in a form and see a preview of the image they upload before submitting the form. The images and the parent form have a has_many relationship. The images are nested in the parent form using fields_for.
I tried using a client side approach, but ran into cross browser and security issues. My current approach I'm trying is to save the images, reload the div portion of the page, and then assign the parent_id to the image after the partent form is submitted (since I will not have a id for the partent form until it is created).
Is it possible to use ajax to submit the fields_for portion of a form and not the entire parent form? Has anyone attempted to do something similar?
Of course you can submit only the fields of that image by using jQuery to select only the fields that you want to send, serialize them and send them as data of the ajax request.
Be careful, you need to send the authtoken, that's why I have type=hidden in the selector
var data = form.find('[name*=image],[type=hidden]').not('[name*=items]').serialize();
$.ajax({url: this.form.attr('action'), context: this, type: 'POST', data: data
The next step with the image I once implemented as storing the in their own database table, returning the client the id to that who then adds it to the form.