How to update a Ext JS 4 grid when popup form is submitted - extjs

Please point me to an Ext JS 4 code sample of a grid with records editable via a popup form. It seems to be a common use case, but I can only find editable grids with editing in place.
My approach:
Each row in the grid has an Edit button, which shows Ext.window.Window with an item Ext.form.Panel.
When the form is submitted I have all the fields, which correspond to a record in the grid store.
I get record using:
var storeRecord = grid.getStore().getAt(index);
But when I modify properties of this record, and hide the form window, the grid does not show updated values.
Am I missing some step? Do I need to force refresh? Or maybe there is a standard way to configure the grid with an editor as a form panel?

After two days of searches, trials and errors, I found the solution:
grid.getView().refresh();
I wish there was a faster way for Ext learning curve. :(

Related

Add extra field to iframe in grid view update table data option in kendo UI?

Think my database have 6 fields. I only show 4 fields and it's data in grid using kendo UI.
I also add toolbar to that grid(Buttons that add and edit for data). When I click that Edit button the iframe only show that 4 fields that show in the grid. But I need to add extra field to that iframe. So is that can do in kendo UI ???
If can someone suggest a way to do that ??
I also using AngularJS to this project...
Finally I found the answer for this.....
I feel that I had search a wrong way..
The answer in here ...Answer

Grid cells with bullet points

I am trying to implement a ExtJS based grid where users would change column data or enter empty columns. Is there a way to show/enter contents as bullet points on ExtJS grid cell like we usually do in Excel?
Thanks in advance
Check this fiddle - https://fiddle.sencha.com/#fiddle/mpl
The Idea is to use htmleditor as the column editor in your grid. However, there'll be quite a lot of work involved in positioning and styling when the html editor opens up for editing.
The fiddle that I created contains just the editor with no styling so it doesn't open good. And when you try, try editing the first column in third row data.

Extjs How to make Grid Column Header Menu options persist in Cookies (Stateful)

Using Sencha Architect Version 3.0.2
ExtJS 4.1
I am trying to make the selections in the Grid column headers stateful and save them in a cookie.
What I am after is the Columns menu that further dropdowns to list the columns in the grid with a Checkbox besides it. Selecting/Un-selecting this box will unhide/hide the respective column.
I want to save this setting so that next time the user loads the grid, a column that is unselected before is hidden and does not appear (until obviously cookies are cleared).
Example Fiddle Located here
Following is the menu I am talking about:
Set stateProvider and make the grid stateful:true with stateId, fiddle here: https://fiddle.sencha.com/#fiddle/a6s

Editable Grid in AngularJS using ngGrid Plugin

I'm working on ngGrid, trying to implement editable grid. In this editable grid, I want to handle validations for the data provided as input while editing.
I also want to implement a functionality where if the data in the cell is left empty then the user should not be able to tab to the next cell.
Please let me know if anyone have any idea about this.
Thank you.

How to dynamically update grid cell color and tool tip based on user action in Extjs 4?

Based on a user action, like click of a button, we need to update a grid cell and modify its background color and tool-tip.
Please note that it has to be only a particular cell of grid record and not the entire column affecting all the records.
Thus, how can we update these two things for a particular grid record cell - background color and tool-tip - dynamically?
Thanks for help in advance.
PS: ExtJs version 4.1.1
I have been able to find a solution for this. Though, not sure if its the best way, but posting it here as it may help someone looking for the same.
The solution is to write custom renderer function for the column which needs to be updated and calling the following code on the user action at which the update is required (like in the handler of the button clicked):
grid.getView().refresh();
The above code will invoke the column renderer function and this renderer function should be able to judge which background color and tool-tip to be applied at the grid column as per the current state of application.
Hope this helps.

Resources