Databases
StackOverflow2013
Postsdbo
POHTML Form to ExtJS Form
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML Form to ExtJS Form
    primarykey
    data
    text
    <p>I have an html form in which the fields are extremely scattered. The page has been created using html table - rowspan and colspan combinations.</p> <p>I need to convert this form to ExtJS and display it in a window.</p> <p>After carrying out some research, I feel that table layout could be best choice for positioning the fields. But there are few issues which I have been facing as following:</p> <ol> <li>If I give rowspan or colspan as 2 or more, then also the fields don't increase in size to occupy the availabe space and remain confined to single column.</li> <li>If I resize the window, then the table doesn't resize (though, the form does as the tbar present at the top expand to occupy the complete space).</li> </ol> <p>I have used the layout as 'fit' for window and layout as 'table' for the form.</p> <p>I have also tried using 'anchor' layout for form and then having a fieldset with table layout, but the positioning didn't work.</p> <p>Could someone please throw some light on this. Following is a basic code snippet I am using:</p> <pre><code>var form = Ext.create('Ext.form.Panel', { url:'voyage_berth_monitoring.php', fieldDefaults: { labelAlign: 'right' }, layout:{ type:'table', columns:3 }, defaults:{ anchor:'100%' }, tbar:[ { xtype:'button', text:'Clear' }, { xtype:'button', text:'Delete' }, { xtype:'tbfill' }, { xtype:'button', text:'Save' }, { xtype:'button', text:'Exit' } ], items: [ { fieldLabel:'item', xtype:'textfield' }, { fieldLabel:'item', xtype:'textfield', colspan:2 }, { fieldLabel:'item', xtype:'textfield' }, { fieldLabel:'item', xtype:'textfield' }, { fieldLabel:'item', xtype:'textfield' } ] }); var win = Ext.create('Ext.window.Window', { title: 'Window', closable: true, closeAction:'hide', minimizable:true, maximizable:true, height:350, width:750, layout:'fit', autoScroll:true, items: form }); win.show(); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USnetemp
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHTML Form to ExtJS Form
      1. USNeverwinterMoon
      1. VTFavorite
    1. COAlready look at: `http://dev.sencha.com/deploy/ext-4.0.0/examples/form/dynamic.html` Form 3 will be helpful. Also you can render top to viewport: `Ext.create('Ext.Viewport', { layout: 'fit', items: [top], renderTo: Ext.getBody() });`
      singulars
      1. POHTML Form to ExtJS Form
      1. USXupypr MV
    2. COThanks for the help Xupypr. I had tried it, but this structure too doesn't allow the flexibility as its there in the table tag of html, where we can have control over every section of page. Moreover, using alot of containers for desired positioning in the page makes it a bit complicated too. Is such flexibility not possible through the table layout of extjs?
      singulars
      1. POHTML Form to ExtJS Form
      1. USnetemp
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload