PDA

View Full Version : Convert html form to ExtJS



extjs.mscit
21 Aug 2013, 4:53 AM
I am creating all input field in my PHP coding, as few forms are user driven. User will decide how many inputfields will be there in form and form will read database and return inputfield.

For that I have used BasicForm in Extjs 3.4. What is alternate in extjs 4.1.3

See below my example of Extjs 3.4. I want same in 4.1.3 as well.


form = new Ext.form.BasicForm(idPrefix + "form", {trackResetOnLoad: true});
form.render();

// and I use contentEl to render in window.

contentEl: idPrefix+"form-panel",



There are 22 forms on my project, use this method to render form. What is alternate???

Thanks.

slemmon
22 Aug 2013, 9:13 PM
I'm not totally sure what you're looking to do just yet. Can you elaborate?

extjs.mscit
23 Aug 2013, 8:39 AM
Hi Lemmon.

I generate field in PHP files manually. I take data from database i.e. [$c], rest of the information from language file and generate them as following.
I have simillar function for checkbox, radio button, dispalay fild, fieldSet etc........

In PHP files, I generate them. (NOTE : works in ExtJs 3.4 and ExtJs 4.1)


public static function textField( $c )
{
$h = "<div class=\"x-form-item {$c['itemCls']}\">";
$h .= "<label for=\"{$c['id']}\" style=\"{$c['labelStyle']}\" class=\"x-form-item-label\">{$c['fieldLabel']}{$c['labelSeparator']}</label>";
$h .= "<div class=\"x-form-element\" id=\"x-form-el-{$c['id']}\" style=\"{$c['elementStyle']}\">";
$h .= "<input id=\"{$c['id']}\" name=\"{$c['name']}\" class=\"{$c['inputClass']} {$c['fieldClass']} {$c['cls']}\" type=\"{$c['inputType']}\" size=\"{$c['size']}\" value=\"{$c['value']}\" tabindex=\"{$c['tabIndex']}\" />";
if ($c['helpTip']) {
$h .= " <img id=\"{$c['id']}-qt\" class=\"t-form-icon\" src=\"/skin/standard/img/icons/help.png\" alt=\"\" />";
}
if ($c['afterFieldHtml']) {
$h .= $c['afterFieldHtml'];
}
$h .= "</div>";
$h .= "<div class=\"{$c['clearCls']}\"></div>";
$h .= "</div>\n";

return $h;
}

In HTML file, I create them. (NOTE : works in ExtJs 3.4 and ExtJs 4.1)


echo FieldGenerarion::textField(array(
'name' => 'myTextbox',
'itemCls' => 'myTextbox-class',
'tabIndex' => 1,
'fieldLabel' => "Get from language"
));


In .js file, I insert/add them in form, like below. (Note: only works in extjs 3.4, raise error in extjs 4.1 while creating object of Ext.form.BasicForm )


form = new Ext.form.BasicForm(idPrefix + "form", {
trackResetOnLoad: true
});

form.add(
//add all controls here.
);
form.render();


Basically, I convert html form into ExtJS component.
And that does not work.

slemmon
23 Aug 2013, 8:52 AM
What if you try creating an Ext.form.Panel (instead of a BasicForm - which is the underlying form of the FormPanel).
http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.form.Panel