PDA

View Full Version : Is form loaded



taelo
14 Dec 2010, 1:44 PM
How can I check to see if a form is already rendered? I have a form that is used to edit 1 record from a store. To handle an "add" function I added a button that when clicked will reset the form (or clear all the field values). If the form is already loaded, I don't need to attempt to add the form to the panel and call doLayout().

Is there a way to check?

arthurakay
14 Dec 2010, 5:43 PM
How can I check to see if a form is already rendered?

FormPanel has a "rendered" property:
- http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.FormPanel

That being said, I don't think that's what you're actually asking for... what I think you're asking for is a way to tell if your form has had its fields populated with the values from your record. Am I correct?

If that's what you're looking for, you need to create some logic that sets/removes a flag when the record is loaded/removed. ExtJS won't handle that for you by default.

taelo
15 Dec 2010, 6:25 AM
What is the best way to handle forms in a viewport then? I have two forms that load records based on selection from a treeloader. These two forms are in an accordion panel. The click function from the treeloader loads the record into the form, but I have to add the form to the accordion with each selection from the treeloader (at least I think I do).


editSwitchForm.getForm().load({
url: 'get-switch-data.php?id=' + e.attributes.id,
method: 'GET',
waitMsg:'Loading...'
});

Ext.getCmp('switchAccordion').add(editSwitchForm);
Ext.getCmp('east').expand();

Ext.getCmp('propsAcc').doLayout();
Ext.getCmp('switchAccordion').expand();

The other issue I have is that if the form is not rendered blank the first time, it sets the first record I click on as the default. So when I click my "new" button which calls "editSwitchForm.getForm().reset();", I get the values from the first treeloader selection I made, instead of blank values. I'm not sure what is causing that behavior, or how to debug that.



EDIT: Ok so it seems as though the form remembers the initial values from when the form was loaded. So unless the form renders with value: '', the form will remember the first record loaded when you issue a reset();. So how can I render a form in a collapsed 'east' region, that's inside a tabpanel, that's inside a collapsed accordion?

arthurakay
15 Dec 2010, 6:47 AM
First of all... stop relying on Ext.getCmp(). You really need to write your code so that you can access each component from within the necessary scope:



var accordionPanel = new Ext.Panel(...);
var treePanel = new Ext.tree.TreePanel(...)
var editSwitchForm = new Ext.form.FormPanel(...);

//...

editSwitchForm.getForm().load({
url: 'get-switch-data.php?id=' + e.attributes.id,
method: 'GET',
waitMsg:'Loading...'
});

//...




What is the best way to handle forms in a viewport then? I have two forms that load records based on selection from a treeloader. These two forms are in an accordion panel. The click function from the treeloader loads the record into the form, but I have to add the form to the accordion with each selection from the treeloader (at least I think I do).

If I understand how the form.load() method works correctly, you shouldn't have to re-add the form each time it loads. See the XML form example:
- http://dev.sencha.com/deploy/dev/examples/form/xml-form.html


The other issue I have is that if the form is not rendered blank the first time, it sets the first record I click on as the default.

That is expected behavior. See the API docs on any Form element's reset() method.

Resets the current field value to the originally-loaded value and clears any validation messages. Also adds emptyText and emptyClass if the original value was blank.

So what you should do is create the forms with empty fields first (setting their "original" values). Then call load() as needed when your users click your tree nodes.

taelo
15 Dec 2010, 7:03 AM
Art, that works great. Apparently I can call doLayout() on a panel that is in a collapsed region. The only problem I have is that one of the forms doesn't show any of the buttons (save, cancel, etc).

arthurakay
15 Dec 2010, 7:06 AM
What is your accordion panel's layout? What are the heights of your form panels?

If I had to guess, your forms are overflowing their container - and the container isn't set as scrollable.

taelo
15 Dec 2010, 7:12 AM
The east region of the viewport is configured with "autoScroll: true".
The Forms are configured with "autoHeight: true"


var propsAccordion = new Ext.Panel({
layout: 'accordion',
id: 'propsAcc',
border: false,
layoutConfig: {
titleCollapse: true,
animate: true
},

arthurakay
15 Dec 2010, 7:16 AM
Are each of the forms scrollable themselves? Is it possible the forms are simply larger than their container?

Can you post a screenshot? That might help me visualize what you've got going on.

taelo
15 Dec 2010, 7:26 AM
I can't post the entire form, but here is the top and bottom. In the top image, the form shows a white space at the top, which is supposed to show a toolbar. If I collapse, then expand that accordion panel, the toolbar shows.

The bottom image should show the save and cancel buttons, but they do not render at all.

top of the form:
23844

bottom of the form:
23843

arthurakay
15 Dec 2010, 7:33 AM
Can you post the section of code that defines your toolbar and buttons? If you defined them on your FormPanel using the "tbar" and "bbar" (or "buttons") configs, I don't know what would stop these from rendering.

taelo
15 Dec 2010, 7:35 AM
var propsAccordion = new Ext.Panel({
layout: 'accordion',
id: 'propsAcc',
border: false,
layoutConfig: {
titleCollapse: true,
animate: true
},
items: [
{
title: '',
id: 'switchAccordion',
tbar: new Ext.Toolbar({
items: [
{
text: 'New', icon: BASE_ICONS + 'add.png',
handler: function() {
if( !Ext.isDefined(buildingCombo.store.totalLength) )
buildingCombo.store.load();

editSwitchForm.getForm().reset();
}
},
'-',
{
xtype : 'tbbutton',
text : 'Refresh',
icon: BASE_ICONS + 'arrow_refresh.png',
handler : function(){
// Ext.Msg.alert('You clicked refresh');
}
},
'->',
{ text: 'Delete', icon: BASE_ICONS + 'delete.png' }
]
})
},

taelo
15 Dec 2010, 10:31 AM
Art, I think I have the problem solved. It looks like the issue is that I was populating the form before I was making the form visible which caused the layout to go bonkers. What I am doing now is expanding the east region, the expanding the appropriate accordion panel before I call my form load function.

I appreciate your help in identifying the problems.

feyyaz
16 Dec 2010, 5:33 PM
I haven't read everything, but on the population or reseting the form in the right time i would recommend to do the reset or populat actions in the 'show' event from the form, there it is for sure the form has been rendered.