2017-09-20 1 views
-3

Ci-dessous le code pour créer un formulaire simple. Ça ne marche pas. Des solutions?Ext Js code pour créer un formulaire ne fonctionne pas

Sample form

Rien ne montre quand je lance ce code.

Ext.onReady(function(){ 
    Ext.QuickTips.init(); 
var simple=new Ext.FormPanel({ 
    lableWidth:75, 
    frame:true, 
url:'save-form.php', 
title:'Login', 
    bodyStyle:'padding:5px 5px 0', 
    width: 350, 
    defaults:{width: 230}, 
    defaultType:'textfield', 
    xtype: 'fieldset', 
    items:[ 
    { 
     fieldLabel: 'username', 
     name:'Username', 
     id:'user', 
     allowBlank:false 
    }, 
    { 
     fieldLabel:'password', 
     name:'Password', 
     id:'pass', 
     allowBlank:false, 
     inputType:'password' 
    }, 
    { 
     xtype:'combobox', 
     store: Ext.create('Ext.data.Store', 
     { 
      fields:['abbr','name'], 
      data:[ 
      { 
       'abbr':'dev', 
       'name':'Developer' 
      }, 
      { 
       'abbr':'test', 
       'name':'tester' 
      }] 

     }), 
     displayField:'name', 
     emptyText:'Select user type..' 
    }, 
    { 
     fieldLabel:'Email', 
     name:'Email', 
     allowBlank:false, 
     vtype:'email' 
    }, 
    { 
     boxLabel:'Remember me', 
     xtype:'checkbox' 
    }], 

    buttons:[ 
    { 
     text:'Login', 
     handler:function() 
     { 
      var a=Ext.getCmp('user').getValue(); 
      var b=Ext.getCmp('pass').getValue(); 
      if(a=="saturn"&&b=="saturn") 
       alert('Succesfull'); 
      else 
       alert('id and password missmatch'); 
      simple.getForm().reset(); 
     } 
    }] 
}) 
simple.render(document.body); 
    }); 

HTML:

<html> 
<head> 
    <title>Login</title> 
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">  
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="ext/ext-all.js"></script> 
    <script type="text/javascript" src="login.js"></script> 
</head> 
</html> 
+0

Vous pouvez expliquer ce que vous attendez à voir, les journaux de la console show, essayez le débogage etc pour nous donner un peu plus pour continuer. Comme il est, vous avez peu de chances d'obtenir une réponse. – PaulNUK

+0

Votre violon est à propos de combobox, où est la forme dans cela. Placez votre code de formulaire et exécutez – UDID

Répondre

3

Vous avez utilisé fieldset sous forme directement si vous souhaitez utiliser cette puis ajoutez l'intérieur éléments de forme. S'il vous plaît se référer ExtJs Docs

J'ai créé une démo espère qu'il vous aidera. Sencha Fiddle

Ext.create('Ext.form.Panel', { 
    title: 'Simple Form', 
    renderTo: Ext.getBody(), 
    lableWidth: 75, 
    frame: true, 
    url: 'save-form.php', 
    bodyStyle: 'padding:5px 5px 0', 
    width: '80%', 
    items: [{ 
     xtype: 'fieldset', 
     padding: 20, 
     defaults: { 
      width: '100%', 
      flex: 1 
     }, 
     defaultType: 'textfield', 
     items: [{ 
      fieldLabel: 'username', 
      name: 'Username', 
      id: 'user', 
      allowBlank: false 
     }, { 
      fieldLabel: 'password', 
      name: 'Password', 
      id: 'pass', 
      allowBlank: false, 
      inputType: 'password' 
     }, { 
      xtype: 'combobox', 
      store: Ext.create('Ext.data.Store', { 
       fields: ['abbr', 'name'], 
       data: [{ 
        'abbr': 'dev', 
        'name': 'Developer' 
       }, { 
        'abbr': 'test', 
        'name': 'tester' 
       }] 

      }), 
      displayField: 'name', 
      emptyText: 'Select user type..' 
     }, { 
      fieldLabel: 'Email', 
      name: 'Email', 
      allowBlank: false, 
      vtype: 'email' 
     }, { 
      boxLabel: 'Remember me', 
      xtype: 'checkbox' 
     }], 
    }], 

    buttons: [{ 
     text: 'Login', 
     formBind: true, 
     handler: function() { 
      //your login here 
      Ext.Msg.alert('Success','You have clicked on Login...!'); 
     } 
    }] 
});