Set reader for form field : FormPanel « Ext JS « JavaScript DHTML






Set reader for form field

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

var fieldset1 = {
  title       : 'Name Information',
  flex        : 1,
  border      : false,
  labelWidth  : 50,
  defaultType : 'field',
  defaults    : {
    anchor     : '-10',
    allowBlank : false
  },
  items : [
    {
      fieldLabel : 'First',
      name       : 'firstName'
    },
    {
      fieldLabel : 'Address',
      name       : 'address'
    },
    {
      fieldLabel : 'Last',
      name       : 'lastName'
    }
  ]
}
var onSuccessOrFail = function(form, action) {
  var formPanel = Ext.getCmp('myFormPanel');
  formPanel.el.unmask();
  
  var result = action.result;
  if (result.success) {
    Ext.MessageBox.alert('Success',action.result.msg);
  }
  else {
    Ext.MessageBox.alert('Failure',action.result.msg);
  }
}
var loadHandler = function() {
  var formPanel = Ext.getCmp('myFormPanel');
  formPanel.el.mask('Please wait', 'x-mask-loading');

  formPanel.getForm().load({
    url     : 'translate.php',
    success : function() {
      var formPanel = Ext.getCmp('myFormPanel');
      formPanel.el.unmask();
    }
  });

}

var buttons = [
  {
    text    : 'load',
    handler : loadHandler
  }
];


var fp = new Ext.form.FormPanel({
  renderTo     : Ext.getBody(),
  width        : 600,
  id           : 'myFormPanel',
  title        : 'Our complex form',
  height       : 350,
  frame        : true,
  layout       : 'vbox',
  layoutConfig : {
        align : 'stretch'
    },
  items        : [
           fieldset1
  ],
  buttons      : buttons,
  reader       : new Ext.data.JsonReader({
    root   : 'records',
    fields : [
      {
        name    : 'firstName',
        mapping : 'name'
      },
      {
        name    : 'lastName',
        mapping : 'nameLast'
      },
      {
        name    : 'address',
        mapping : 'addy'
      }
    ]
  
  })
});



});
</script> 
<div id='div1'>asdf</div>
</body>
</html>

   
    
  








Related examples in the same category

1.Create a form panel and add to window
2.Create form panel and add to window
3.Add fields to form panel
4.Render form panel to html body
5.Set width, height and title for form panel
6.Set defaults alert message target and anchor offset
7.Set label width and default control type
8.Set url for FormPanel
9.Get raw value from form field
10.Set monitorValid = true and monitorPoll = 50
11.By virtue of inheriting from the Ext Container class, an Ext.form.FormPanel can contain any Ext Component.
12.Set defaults: {width: 230} for FormPanel
13.forms can contain TabPanel(s)
14.Use addButton method to add buttons to a FormPanel
15.Titled border for FormPanel
16.Add button for a FormPanel and set Label text