PDA

View Full Version : Tbar in form



deejam
22 Jan 2009, 8:20 AM
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;
}

22 Jan 2009, 10:12 AM
I would suggest reading the 2.0 section of : http://extjs.com/learn/

Animal
22 Jan 2009, 11:20 AM
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
22 Jan 2009, 1:09 PM
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
22 Jan 2009, 1:15 PM
http://extjs.com/forum/showthread.php?p=236612#post236612

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

deejam
22 Jan 2009, 1:43 PM
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
23 Jan 2009, 6:07 AM
Is this override supposed to work on 2.2?

Animal
23 Jan 2009, 6:21 AM
Did you check anything? Set breakpoints in the code? Examine the DOM structure your FormPanel ended up with?

deejam
23 Jan 2009, 6:31 AM
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
23 Jan 2009, 6:35 AM
Examine the DOM of te FormPanel. The outermost element should be a <form>

deejam
23 Jan 2009, 6:50 AM
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
23 Jan 2009, 8:08 AM
http://extjs.com/forum/showthread.php?p=277285#post277285

First line.

deejam
23 Jan 2009, 9:50 AM
http://extjs.com/forum/showthread.php?p=277285#post277285

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

deejam
26 Jan 2009, 7:29 AM
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
26 Jan 2009, 8:37 AM
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
26 Jan 2009, 10:55 AM
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
26 Jan 2009, 12:10 PM
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
26 Jan 2009, 2:17 PM
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.