PDA

View Full Version : Custom Form Field and Form Submission Question



carlos.muentes
10 Sep 2009, 5:25 AM
Hello all,

I've built a drop-down checked grid editor control that extends a TriggerField, nothing too revolutionary, but it accomplishes the multi-select idiom using checkboxes rather than ctrl+click.

The control should bind to its data store the way a combobox does. That is, it should have a value field (usually the record's ID), and a display field (usually the record's Name field), but in some cases it could have N-more columns.

The control functions correctly - that is, clicking the TriggerField shows the grid, I can check records, and when I click my provided 'OK' button to close the drop-down, the text field in the TriggerField gets populated correctly. The problem I'm having is figuring out how to submit the form.

When the form is submitted, the text value from the TriggerField is automatically submitted, which is incorrect; I need to submit the 'ID' property but I can't figure out how to do that. I've overriden getValue() and getRawValue() but neither work. I've also overridden setValue() which takes the selected items, and builds a comma-delimited list of of selected items to display in the text field of the TriggerField.

So here's my question: can anyone tell me what function to override, or what API call to make so that the TriggerField value returns the ID field, and *not* the Display field?

I'm also doing a standard form submission (not XHR), and I can't figure out how to customize the parameters that are submitted since it appears that all happens automagically. If you could share this instead, this would also solve my problem.

Can someone please help? :((

carlos.muentes
10 Sep 2009, 7:15 AM
Bump ... I've resorted to reading ExtJs's source code; can't somebody share anything? Both of these problems seem so basic ... :D

carlos.muentes
10 Sep 2009, 10:54 AM
Do I have to be a subscriber to something to get replies? This is my second forum post in the ExtJS forums and neither one has ever received a reply. I see lots of forum activity, but my post seems to have fallen upon deaf ears. :((

Condor
11 Sep 2009, 7:18 AM
No, you don't need to have a support subscription (although it helps).

You do a very good introduction of you custom component, but without seeing the code I can't tell you anything about the problem.

carlos.muentes
11 Sep 2009, 9:58 AM
Thanks for replying Condor - I actually figured out the problem. I basically mimiced what Ext.form.ComboBox does by using a hidden field that gets submitted instead. It works quite well.

I also considered descending from ComboBox instead, but the problem is its value setting appears to depend on scalar values, which I didn't have; by nature of multi-select, I was going to have a list of selected items, delimited by some separator. For example, ComboBox seems to seek a record by the selected value, and read its display field into its TextField parent, which wouldn't work in my example.


The code isn't ready for release or public use yet, but I've included the parts that matter below:


onRender: function(ct, position) {
if (this.isRendered) {
return;
}
this.readOnly = true;

Ext.ux.CheckedGridDropdown.superclass.onRender.call(this, ct, position);

this.hiddenField = this.el.insertSibling({ tag: 'input', type: 'hidden',
name: this.el.dom.getAttribute('name'), id: this.id + '-hidden'
}, 'before', true);

// prevent input submission
this.el.dom.removeAttribute('name');

this.isRendered = true;
}

And:



setValue: function(aRecords) {

this.selectedRecords = aRecords;
var lStringBuilder = new StringBuilder();

Ext.each(this.selectedRecords, function(record) {
lStringBuilder.append(record.get(this.displayField) + ', ');
}, this);

this.hiddenField.setAttribute('value', this.getValue());

Ext.ux.CheckedGridDropdown.superclass.setValue.call(this, lStringBuilder.toString());

}, getValue: function() {
var lStringBuilder = new StringBuilder();

Ext.each(this.selectedRecords, function(record) {
lStringBuilder.append(record.get(this.valueField) + ', ');
}, this);

return lStringBuilder.toString();
}