<HTML> Textarea multi-line text input control// Ext. form. textareavar textarea = new Ext. form. textarea ({width: 200, // width grow: True, // when the value is true, it indicates that the field can be automatically scaled according to the content preventscrollbars: True, // prevent the scroll bar from appearing, if the parameter is exceeded, fieldlabel: 'Self-introduction', allowblank: false, // do not allow empty emptytext: 'null'. // enter the default message maxlength: 100, // restrict the input data to 10-minlength: 10,}); // Ext. form. formpanelvar form = new Ext. form. formpanel ({Title: 'form control', frame: True, items: [textarea], renderto: 'form '});When grow: false preventscrollbars: false, a scroll bar appears if the content exceeds the display range.
Datefield Date input control// Ext. form. datefieldvar datefield = new Ext. form. datefield ({fieldlabel: 'birthday', emptytext: 'Please select', // The default message format: 'Y-m-d' when the input is empty ', // used to overwrite the localized default date format string disabledays: [] // a disabled date array in the string format}); // Ext. form. formpanelvar form = new Ext. form. formpanel ({Title: 'form control', frame: True, items: [datefield], renderto: 'form '});Timefield time input control// Ext. form. timefieldvar timefield = new Ext. form. timefield ({fieldlabel: 'time', emptytext: 'select', // The default message minvalue: '10: 30 am' when the input is null ', // start time maxvalue: '14: 00 PM ', // end time increment: 30 // interval: 30 minutes}); // Ext. form. formpanelvar form = new Ext. form. formpanel ({Title: 'form control', frame: True, items: [timefield], renderto: 'form '});Htmleditor online editor// Ext. form. htmleditorvar htmleditor = new Ext. form. htmleditor ({fieldlabel: 'login', enablealignments: True, // The buttons left, center, and right (true by default) are allowed ). Enablecolors: True, // enablefontsize: true for the enablecolors button that allows foreground and highlighted colors, // The enablefontsize button that allows you to increase or decrease the font size (true by default ). Enablefont: True, // allows font options. Enableformat: True, // bold, italic, and underline buttons are allowed (true by default ). Enablelinks: True, // allows the create link button. Enablelists: True, // allow the project and list symbol buttons. Enablesourceedit: True, // you can switch to the source code editing button .}); // Ext. form. formpanelvar form = new Ext. form. formpanel ({Title: 'form control', frame: True, items: [htmleditor], renderto: 'form '});ComboBox// Comboboxvar DATA = [['0', 'studen'], ['1', 'teachers'], ['2', 'engineer'], ['3', 'farmer ']; var store = new Ext. data. simplestore ({fields: ['value', 'text'], data: Data}); var combo = new Ext. form. comboBox ({store: store, // store is used to provide emptytext: 'select 'For ComboBox, triggeraction: 'all ', // query will automatically match all based on the input information to display all data modes: 'local', // read data valuefield: 'value' locally, // The name is the same as that in the store definition. Data is displayed based on the relationship between them. Displayfield: 'text', applyto: 'combo ', // display position, which must correspond to <input id = "combo" type = "text"> value: 'Student '// set the default value });Listener event:
VaR reportfaulttypeschoolcbox = new Ext. form. comboBox ({fieldlabel: 'campus ', width: 200, Editable: false, // you cannot enter name: 'School', ID: "school", hiddenname: "reportfaulttypeschool ", store: reportfaulttypeschoolstore, emptytext: '-- select --', allowblank: false, // It is not allowed to be empty. blktext: 'select campus ', // error message mode: 'remote', displayfield: 'reportfaulttypename', valuefield: 'reportfaulttypeid', triggeraction: 'all'}); // listen to the event reportfaulttypeschoolcbox. on ("select", function (ComboBox) {alert (ComboBox. getvalue () + "-" + ComboBox. getrawvalue ());});Select to ComboBox// Select to comboboxvar combofromselect = new Ext. form. comboBox ({emptytext: 'select', triggeraction: 'all', // the query will automatically match all based on the input information to display all data modes: 'local ', // read data locally transform: 'combofs '});The Select drop-down box is required in HTML.
<Select id = "combofs"> <option value = "0"> Apple </option> <option value = "1"> grape </option> <option value = "2 "> banana </option> <option value =" 3 "> pineapple </option> </SELECT>Checkbox multiple selection box<HTML> Radio radio button<HTML>Listener event:
{Xtype: "fieldset", title: "attachment", layout: "form", autoheight: True, style: 'padding-left: 10px; ', items: [{xtype: 'radiogroup', fieldlabel: 'upload attachment? ', defaulttype: 'radio', ID: 'radiogroup', hidelabels: True, items: [{boxlabel: 'yes', inputvalue: '1', name: 'radio'}, {boxlabel: 'no', inputvalue: '2', name: 'radio', checked: true}], listeners: {"change": function () {alert ("value:" + Ext. getcmp ("radiogroup "). getvalue (). inputvalue) ;}}}]}Comprehensive Application<HTML> Automatically fills data in the formAdding data complements modifying data. If the original form is used for modification, We need to assign the corresponding data to each control when the form is displayed. We know that Ext. Form. Field has the setvalue () function. You can set the data of the corresponding control in the form. In this case, a problem occurs: Every control is retrieved, and then assigned a value. In addition, many data types need to be converted, which is really troublesome.
Instead of using the setvalue () function, we use Ext. Data. jsonreader to read and convert data.
The data transmitted in the background is a JSON array with only one element, as shown below:
[{text:’textField’,number:12.34,date:’2008-01-01 00:00:00’,combo:1}]Here we provide data of the string, number, date, and Other types. The corresponding reader needs to be configured in the form, as shown below:
var reader = new Ext.data.JsonReader({},[{name:’text’,type:’string’},{name:’number’,type:’float’},{name:’date’,type:’date’,dateFormat:’Y-m-dTH:i:s’},{name:’combo’,type:’int’},]);Now we put the set reaer in the form. The JSON returned by the background will be converted to the corresponding data type by jsonreader for the form:
var form = new Ext.form.FormPanel({title:’form’,frame:’true’,labelWidth:50,reader:reader,items:[{xtype:’textfield’,name:’text’}]});When the form. Load () function is called, the form uses ajax to read the required data from the background. If load () is called without any parameters, the load () function uses the URL parameter corresponding to the form. However, the URL set in the form is generally the URL for data submission. To avoid mixing the submit and read operations, we recommend that you define another URL specifically for Data Reading, as shown below:
{Text: 'read', Handler: function () {form. getform (). Load ({URL: 'json.txt '});}}Now we pass a URL parameter for load () to specify the URL for reading data. The information returned from this URL is the JSON string used to fill data in the form as mentioned above. This enables Automatic Data filling for each component in the form.
Form window
// Var win = new Ext. Window ({}): Creates a new window form object. VaR win = new Ext. window ({Title: "", // the title of the form iconcls: 'bzcl ', // a CSS style class that can provide the background image, width: 400, // width autoheight: True, // height, adaptive closeaction: 'close ', // when the close button is clicked, the action "close" is executed to release the memory occupied by the form. The "hide" hidden form plain: True, // true indicates that the form is forced to maintain coordination with the background color modal: true, // shield other controls. Only this form can operate on draggable: false, // whether closable: True can be dragged, // whether maximizable: True can be disabled, // whether minimizable: True can be maximized, // whether resizable: True can be minimized, // whether the form size can be adjusted layout: "form", items: [Form]});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
