View Full Version : passing Textfield Value on Form to GridPanel within Form

16 Feb 2010, 11:28 AM
I have a form that has Master-Detail duties. Much like an invoice with header data which is singular and detail record which is 1:n.

In order to insert the detail records properly, my EditorGridPanel must pick up the KEY field from the Form.

Question 1: Can this be done prior to the form being submitted (I only want the user to submit form once)?

Question 2: If so, Which EXTJS method should I use to do this? I have tried setting a VAR = xxxx and then calling for it in my Editor grid new Record? I have tried setting the variable many different ways, and when I call it in the grid, I just get the textual representation of the variable code string or an error that the variable parameters is undefined.

I think I may be calling the variable correctly, but have a chicken-egg dilemma:

1) I declare the variable right before the grid is rendered. At this time, the form code has not been run since the form includes the grid.

2) If I place the grid after the form, the grid is not defined so it cannot be included in the form.

3) If I define the variable at the time the new gridRow is created, I just get the textual representation of the variable declaration.

4) If I declare the variable after the form is created (thus the grid is rendered), I get nothing.

This makes me think I need a listener on my textfield that sets the variable if there is a value entered (not sure how to do this exactly). Which I am not very good at yet as I have only been working with EXT for about 2 months and only built from the examples and basics at this point.

Any help or guidance is appreciated. I am supplying my variable declaration (s) as well as the code that handles the grid record addition. Screenshot attached as well.

var textPOID = {
xtype: 'textfield'
,fieldLabel: 'Order #'
,valueField: 'poID'
,hiddenName: 'poID'
,name: 'poID'
,allowBlank: false

// ...
//VARIABLE - get undefined errors if I put this above grid.because form is not ready

//var pono= po_form.getForm().getValues();
var pono = Ext.getCmp('field_poID').getValue(); //


text: 'Add'
,icon: 'images/table_add.png'
,cls: 'x-btn-text-icon'
,handler: function() {
,new itemRecord({
poID: pono
,qty: ''
,qty_uom: ''
,itemCost: ''
,item_uom: ''


16 Feb 2010, 9:40 PM
Not 1 opinion on Question 1 or does the silence mean I am just an *****?

17 Feb 2010, 2:45 AM
:) It's not because you're an *****... you're not I'm sure!

I couldn't understand the question! Try rephrasing it. Is it that you just want to get a form field's value when you click on the 'Add' button?

// ...
new itemRecord({
poID: Ext.getCmp('field_poID').getValue(),

Note: The form doesn't have to be submitted for you to get the current field value. Just be aware though that if you insert the current value, and then change the field you'll have to update your "detail" grid's store. Something along the lines of:

Ext.getCmp('poID').on('blur', function(f)
var newValue = f.getValue();

record.data.poID = newValue;

Ext.getCmp('grid_name').getView().refresh(); // Not sure if you have to do this.

17 Feb 2010, 10:44 AM
That did the trick.... I was overthinking it. When I tried doing what you did, instead of just saying

poID: Ext.getCmp.....

I was throwing in a function to try and return the item value --->

poID: function() {....

Which threw me down the overthinking path and "try everything but the right answer" path.

Thank you so much for the lesson!!! Noob lesson learned #4062!