Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 5th, 2012  |  syntax: None  |  size: 3.79 KB  |  hits: 20  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. ExtJs 4.1 - Issue with a fluid form inside a window
  2. <html>
  3.     <head>
  4.         <title>TEST</title>
  5.         <link rel='stylesheet' href='resources/extjs/resources/css/ext-all.css' />
  6.         <script type='text/javascript' src='resources/extjs/ext-all-dev.js'></script>
  7.         <script type='text/javascript'>
  8.             function getForm(){
  9.                 var form    =   {
  10.                     xtype:'form',
  11.                     region:'north',
  12.                     height:100,
  13.                     autoScroll:true,
  14.                     minWidth:300,
  15.                     title: 'Simple Form',
  16.                     items: [
  17.                     {
  18.                         xtype:'container',
  19.                         layout:'hbox',
  20.                         items:[
  21.                             {
  22.                                 xtype:'textfield',
  23.                                 fieldLabel: 'First',
  24.                                 name: 'first',
  25.                                 allowBlank: false,
  26.                                 width:100,
  27.                                 labelWidth:50,
  28.                                 flex:1
  29.                             },{
  30.                                 xtype:'textfield',
  31.                                 fieldLabel: 'Last',
  32.                                 name: 'last',
  33.                                 allowBlank: false,
  34.                                 width:100,
  35.                                 labelWidth:50,
  36.                                 flex:1
  37.                             }
  38.                         ]
  39.                     }]
  40.                 };
  41.                 return form;
  42.             }
  43.             function getWin(){
  44.                 var win =   Ext.create('Ext.window.Window',{
  45.                     title:'Test Window',
  46.                     height:400,
  47.                     width:600,
  48.                     layout:'border',
  49.                     items:[
  50.                         getForm(),
  51.                         {
  52.                             region:'center',
  53.                             title:'Center Region',
  54.                             html:'Center Region Content'
  55.                         }
  56.                     ]
  57.                 });
  58.                 return win;
  59.             }
  60.             Ext.onReady(function(){
  61.                 var win =   getWin();
  62.                 win.show();
  63.             });
  64.  
  65.         </script>
  66.     </head>
  67.     <body>
  68.     </body>
  69. </html>
  70.        
  71. Ext.require([
  72.     'Ext.form.*',
  73.     'Ext.window.Window'
  74. ]);
  75.  
  76. Ext.onReady(function() {
  77.     var form = Ext.create('Ext.form.Panel', {
  78.         border: false,
  79.         fieldDefaults: {
  80.             labelWidth: 50
  81.         },
  82.         url: 'save-form.php',
  83.                 autoScroll: true,
  84.         autoHeight: true,
  85.         bodyPadding: 5,
  86.  
  87.         items: [
  88.             {xtype:'panel',
  89.              title:'Simple Form',
  90.              minWidth: 400,
  91.              layout: 'hbox',
  92.              defaultType: 'textfield',
  93.              items:[
  94.             {
  95.               fieldLabel: 'First',
  96.                 name: 'first',
  97.                 allowBlank: false,
  98.                 flex: 1,
  99.                 anchor:'100%'  // anchor width by percentage
  100.             },{
  101.                 fieldLabel: 'Last',
  102.                 name: 'last',
  103.                 allowBlank: false,
  104.                 flex: 1,
  105.                 anchor: '100%'  // anchor width by percentage
  106.             }
  107.           ]
  108.             }, {
  109.                 xtype: 'panel',
  110.                 title: 'Center Region',
  111.                 html: 'Center Region Content'
  112.  
  113.             }]
  114.     });
  115.  
  116.     var win = Ext.create('Ext.window.Window', {
  117.         title: 'Test Window - Resize Me',
  118.         width: 600,
  119.         height:400,
  120.         minWidth: 300,
  121.         minHeight: 200,
  122.         layout: 'fit',
  123.         plain: true,
  124.         items: form,
  125.  
  126.         buttons: [{
  127.             text: 'Send'
  128.         },{
  129.             text: 'Cancel'
  130.         }]
  131.     });
  132.  
  133.     win.show();
  134. });​
create a new version of this paste RAW Paste Data