View Full Version : Re-use store in different window instances?

25 Oct 2012, 7:38 AM
I'm trying to replicate the UI functionality of a Delphi software in a web app, I'm fairly new the ExtJs but no JS. Im having trouble understanding the proper way of separating my views and data. For example I have a main window instance for my app, when a user double clicks a record for a grid, I want to instantiate a new instance of the "Edit" class that I had already created in Architect. I have a store, model defined for the grid. So my question is would it be best practice to update the already existing store/model instance using the models index in the store? I'm using a controller to listen for the 'itemdblclick' event, which also passes a model instance of the record selected along with index. What would be the best practice here?

Also I've build a simple asp page to output a dynamic xml file on demand, I want to build in update functionality to it but I'm not sure where I would start to even try to update from ExtJs as far as store/models are concerned. Can anyone suggest some good examples of updating data to a server side resource, all if the asp is just for testing. We have a third party JSON connector for our database called RemOjbects that we will be converting all of the data objects to use. Any help would be appreciated while I am still evaluating Sencha as a solution for my company...

James Goddard
25 Oct 2012, 11:30 AM
If I understand what you are looking for this example pretty much does it:

(http://docs.sencha.com/ext-js/4-1/#!/example/form/form-grid.html)Only thing it is missing is a save button on the form which would pretty much call:
Which you'd probably want to follow up with a:

25 Oct 2012, 12:31 PM
Thank you for your reply, I did find the solution to one of my questions with the form example.

I'm curious though, in the update example you gave. It says that the method will update the (model) passed to it, which is what I need if that means it will update the model instance in the originating store which is connected to the originating grid panel. So in other words, the same store from which the model instance came, is the same model instance that I want to update. Does that make sense? Because when I go to call (MyProxy.MyWriter) to send updates to wherever, I need the changes to actually be made in the store first...right?

James Goddard
25 Oct 2012, 1:29 PM
As long as the record you passed in to loadRecord or updateRecord is the record from the store, then yes, it will update that record.

26 Oct 2012, 5:26 AM
Ok, I tried to update the same record by not specifying a record in updateRecord(), which is supposed to update the same record as passed to loadRecord() and this is what I get.

Uncaught ReferenceError: record is not defined Edit.js:89
Ext.define.onBtnSaveClick Edit.js:89
fire ext-all.js:15
Ext.define.continueFireEvent ext-all.js:15
Ext.define.fireEvent ext-all.js:15
Ext.override.fireEvent ext-all.js:15
Ext.define.fireHandler ext-all.js:15
Ext.define.onClick ext-all.js:15
(anonymous function)

This is the code I was using for my edit screen...

Ext.define('Inters.view.Edit', {
extend: 'Ext.window.Window',

height: 502,
id: 'wEdit',
width: 752,
title: 'Edit',
modal: true,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
dockedItems: [
xtype: 'tabpanel',
dock: 'top',
height: 472,
activeTab: 0,
dockedItems: [
xtype: 'form',
dock: 'top',
height: 427,
id: 'Overview',
layout: {
type: 'absolute'
bodyPadding: 10,
title: 'Overview',
items: [
xtype: 'textfield',
id: 'frmFirstName',
width: 260,
name: 'firstname',
fieldLabel: 'First name'
xtype: 'textfield',
x: 10,
y: 50,
id: 'frmLastName',
width: 260,
name: 'lastname',
fieldLabel: 'Last name'
xtype: 'button',
x: 297,
y: 255,
id: 'btnSave',
text: 'Save',
listeners: {
click: {
fn: me.onBtnSaveClick,
scope: me


onBtnSaveClick: function(button, e, options) {



26 Oct 2012, 5:29 AM
This is the controller event that fires the loadRecord()

Ext.define('Inters.controller.IntersController', { extend: 'Ext.app.Controller',

views: [

onGridviewItemDblClick: function(tablepanel, record, item, index, e, options) {

// console.log(record.get('studentid'));

var x = Ext.create('Inters.view.Edit');



init: function(application) {
"gridpanel": {
itemdblclick: this.onGridviewItemDblClick


James Goddard
27 Oct 2012, 5:28 PM
Should work, loadRecord sets this._record and updateRecord uses it. Might want to debug and check out the this and make sure they are the same and see what _record is set to.

You could also just save the record yourself and pass it to the update.

29 Oct 2012, 7:54 AM
Ok, this is for anyone else that reads this thread and missed the important comment in the documentation like I did. You must first get the form instance

var basicForm= button.up('form').getForm();

then get the record instance of the form

var rec = basicForm.getRecord();

then explicitly set the model instance in the update like so

basicForm = basicForm.updateRecord(rec);

this is in the documentation comments for Ext.form.Basic located here...