Geek Answers Handbook

EXT JS panel with several parts

How to create a form panel with smaller parts. Smaller parts must be reused in the form panel.

+4
source share
1 answer

I use an assistant for this. Here is an example that should show you a trick.

/// limitForm : array with all ellemts that should be taken from the inner form. can be null or empty to take all FormContent.loginForm = function (limitForm) { var defaults = [ {/* this has the ID 0 */ xtype: 'Fieldset', title: 'Username', layout: 'form', items: [ { xtype: 'panel', layout: 'form', header: false, hideBorders: true, bodyBorder: false, border: false, height: 40, items: [ { xtype: 'textfield', fieldLabel: 'Username', regex: /^[\w\s\.]*$/, regexText: 'No special chars allowed in this field', anchor: '100%', name: 'LoginName' } ] } ] } , {/* this has the ID 1 */ xtype: 'Fieldset', title: 'Additional data', layout: 'form', items: [ { xtype: 'panel', layout: 'column', header: false, border: false, bodyBorder: false, height: 40, items: [ { xtype: 'panel', layout: 'form', header: false, columnWidth: 0.5, hideBorders: true, bodyBorder: false, border: false, items: [ { xtype: 'textfield', fieldLabel: 'Title', anchor: '100%', name: 'Title' } ] }, { xtype: 'panel', layout: 'form', header: false, columnWidth: 0.5, style: 'margin-left: 18px', hideBorders: false, border: false, bodyBorder: false, labelWidth: 65, items: [ { xtype: 'textfield', fieldLabel: 'Title', anchor: '100%', name: 'Title' } ] } ] } } ]; if (limitForm) { var ds = []; for (var i = 0, len = limitForm.length; i < len; i++) { ds.push(defaults[limitForm[i]]); } defaults = ds; } return defaults; }

If you want to reuse it, you can change the function parameters using configuration arrays or field names (names must be changed, otherwise only one field will be sent). But I think this should show you the trick.

Of course, this song will be uploaded in the main form!

+4
source

More articles:


All Articles