Tbar in form

[deejam]

Hello!

I found this excellent framework a couple of days ago and I find it very useful despite that I have never developed i JavaScript before.

I'm learning by trial-and-error and I do solve my problems after searching this forum, google etc but I'm stuck on a problem that I think I know the reason for, but not how to solve it. I've find lots of similar problems but I have not been able to use that knowledge to fix my problem.

My problem
I have a FormPanel with a tbar of fields and a htmlarea as items. When data is loaded it will be assigned to the htmlarea, but not the fields inside the tbar. If I move a field from the tbar outside the tbar (like the htmlarea), it will work fine. Saving is no problem, all values from the tbar will submit like a charm!

I'm having trouble understanding in which way events are launched (for example render).

My testing code

Ext.msp.articleEditorForm = Ext.extend(Ext.form.FormPanel, {
frame: true,
width: 600,
labelWidth: 70,
method: 'POST',
reader: new Ext.data.JsonReader({
fields: ['id', 'headline', 'created_date', 'publish_date', 'publish', 'content' ],
root: 'data'
}),

initComponent:function() {
Ext.apply(this, {
items: [{
// Fields within tbar do not load
// but saves fine
tbar: [{
xtype: 'textfield',
name: 'headline',

},'-',{
xtype: 'datefield',
name: 'publish_date',
format: 'Y-m-d'
},{
xtype:'timefield',
name: 'publish_time',
format: 'H:i',
increment: 30,
width: 100,
},'->',{
xtype:'checkbox',
name: 'publish',
boxLabel: 'Publish'
}]
// First level fields do load
},{
xtype: 'hidden',
fieldLabel: 'id',
name: 'id',
},{

xtype: 'textfield',
name: 'headline',
},{
xtype: 'htmleditor',
name: 'content',
hideLabel: true,
labelSeparator: '',
height: 500,
anchor: '100%'
}],
buttons:[{
text: 'Save',
formBind: true,
scope: this,
handler: this.onSubmit
}]
});

Ext.msp.articleEditorForm.superclass.initComponent.apply(this, arguments);
},

onRender:function() {
Ext.msp.articleEditorForm.superclass.onRender.apply(this, arguments);
},

onSubmit:function() {
this.getForm().submit({

url: 'url_removed',
scope: this,
//success:this.onSuccess,
//failure:this.onFailure,
/*params: {
id:'save'
},*/
//waitMsg:'Saving...',
});
},
});

Ext.reg('articleEditorForm', Ext.msp.articleEditorForm);

function newArticleEditorForm ( articleId ) {
test = new Ext.msp.articleEditorForm;

test.load ({
url: 'url_removed',
});

// Returns to a window, not shown in this example
return test;
}

[jay@moduscreate.com]

I would suggest reading the 2.0 section of : http://extjs.com/learn/

[Animal]

The fields in the tbar will have to be programatically added to the underlying BasicForm so that it knows about them.

They still won't be submitted though because the tbar is outside of the <form> element. The FormPanel's body is the <form> element which is the innermost of the structure of a Panel.

I have an outstanding Feature Request to make the overall, outermost Element the <form>.

I have been using this in my app for a while and it works well. All input fields anywhere in it relate to the form and get submitted.

http://extjs.com/forum/showthread.php?p=277284

[deejam]

Hi!

I understand the problem more after reading Animal's post (http://extjs.com/forum/showthread.php?p=236612#post236612). But unfortunately I do not understand much about what his suggested fix do.

Can you explain it in a lower level using my code as an example?

[mschwartz]

http://extjs.com/forum/showthread.php?p=236612#post236612

Put the javascript there in a file and include that in your page.

[deejam]

http://extjs.com/forum/showthread.php?p=236612#post236612

Put the javascript there in a file and include that in your page.

Didn't help, same behavior.

[deejam]

Is this override supposed to work on 2.2?

[Animal]

Did you check anything? Set breakpoints in the code? Examine the DOM structure your FormPanel ended up with?

[deejam]

Did you check anything? Set breakpoints in the code? Examine the DOM structure your FormPanel ended up with?
The only thing that I have checked is to se if the initComponent executes, and it does. I have included your code after ext but before my code. Your code executes after mine and I do not know how to fix that, but I'm trying to!

As I wrote in my first post, Javascript is new to me and I have lots to learn!

[Animal]

Examine the DOM of te FormPanel. The outermost element should be a <form>

[deejam]

Examine the DOM of te FormPanel. The outermost element should be a <form>
The tbar items are inside the form. The behavior is the same as before; data is not loaded inside the tbar but it submits fine.

[Animal]

http://extjs.com/forum/showthread.php?p=277285#post277285

First line.

[deejam]

http://extjs.com/forum/showthread.php?p=277285#post277285

First line.
I'll look into that. Thanks.

[deejam]

I have not figured out how to do this. Can someone give me some info on how to think. I don't need a solution, just a start. I need to learn!

[Animal]

Create the Fields seperately as Fields. Hold references to them in vars.

Create your FormPanel with the tbar containing those Fields.

Add the Fields to the FormPanel's form. see getForm()

[deejam]

Create the Fields seperately as Fields. Hold references to them in vars.
I guess this is as simple as:

var headline = new Ext.form.Field({
name: 'headline',
value: 'asdf'
});
Javascript always assigns by reference, right?


Create your FormPanel with the tbar containing those Fields.

tbar: [headline, ...
I've done the two steps above in the initComponent method. Correct?


Add the Fields to the FormPanel's form. see getForm()
This is where I have problems. Where shall I add the field to the form? Should I add it directly in the form before the form values are loaded? I've tried to figure this out using Component Life Cycle (http://extjs.com/learn/Ext_2_Overview#Component_Life_Cycle) but wihout luck. I tested to see what was in the variables in the onReder method but (this.)headline was undefined.

[Animal]

The FormPanel is the visual representation.

The server IO (submitting and loading) is handled by a BasicForm object which is owned by the FormPanel.


See the FormPanel.getForm method.

It is the BasicForm that the Field must be programatically added to so that it knows about it when loading fields from a server response.

[deejam]

This works, but I don't know if this is the "right way". Any comments on how I solved it?


function newArticleEditorForm ( articleId ) {

var id = new Ext.form.Hidden({
name: 'id',
});

var headline = new Ext.form.Field({
name: 'headline',
});

var content = new Ext.form.HtmlEditor({
name: 'content',
hideLabel: true,
height: 500,
anchor: '100%'
});

var publish_date_date = new Ext.form.DateField({
name: 'publish_date_date',
format: 'Y-m-d'
});

var publish_date_time = new Ext.form.TimeField({
name: 'publish_date_time',
format: 'H:i',
width: 75,
});

var publish = new Ext.form.Hidden({
name: 'publish',
});

var store = new Ext.data.JsonStore({
autoLoad: true,
url: 'url_removed',
root: 'data',
fields: ['id', 'headline', 'created_date', 'publish_date', 'publish', 'content'],
reader: new Ext.data.JsonReader({
id: 'id',
//root: 'data'
}, ['id', 'headline', 'created_date', 'publish_date', 'publish', 'content' ]),
});

var form = new Ext.form.FormPanel({
store: store,
method: 'POST',
items: [{
tbar: [headline, '-', publish_date_date, publish_date_time
,'->',{
xtype:'button',
name: 'publish',
text: 'Publish',
handler: function (e) {
//Todo
}
}],

}, id, publish, content
],

buttons:[{
type: 'submit',
text: 'Save',
scope: this,
handler: function () {
form.getForm().submit({
url: url_removed',
scope: this,
params: {
'publish_date': new Date ( Date.parseDate ( form.getForm().getValues().publish_date_date + ' ' + form.getForm().getValues().publish_date_time , 'Y-m-d H:i' ) ).format ('Y-m-d H:i:s')
},
//success: alert('success'),
//failure:this.onFailure,
});

}
}, {
type: 'button',
text: 'Cancel',
}]
});

store.on('load', function (store, records, options ) {
id.setValue ( store.reader.jsonData.data.id );
headline.setValue ( store.reader.jsonData.data.headline );
content.setValue ( store.reader.jsonData.data.content );
publish.setValue ( store.reader.jsonData.data.publish );
publish_date_date.setValue ( new Date(Date.parseDate(store.reader.jsonData.data.publish_date, 'Y-m-d H:i:s')).format('Y-m-d') );
publish_date_time.setValue ( new Date(Date.parseDate(store.reader.jsonData.data.publish_date, 'Y-m-d H:i:s')).format('H:i') );

});

return form;
}
Edit: I did not manage to load the data to the form automatically. I had to manually add all field values.