Làm việc với form trong extjs

Làm việc với form trong extjs

Tạo một form cơ bản:

Ext.create(‘Ext.form.Panel’, { renderTo: Ext.getBody(), title: ‘User Form’, height: 130, width: 280, bodyPadding: 10, defaultType: ‘textfield’, items: [ { fieldLabel: ‘First Name’, name: ‘firstName’ }, { fieldLabel: ‘Last Name’, name: ‘lastName’ }, { xtype: ‘datefield’, fieldLabel: ‘Date of Birth’, name: ‘birthDate’ } ] });

Cac trường trong form

Extjs sử dụng các trường trong form chuẩn.

• Ext.form.field.Checkbox
• Ext.form.field.ComboBox
• Ext.form.field.Date
• Ext.form.field.Display
• Ext.form.field.File
• Ext.form.field.Hidden
• Ext.form.field.HtmlEditor
• Ext.form.field.Number
• Ext.form.field.Radio
• Ext.form.field.Text
• Ext.form.field.TextArea
• Ext.form.field.Time

Tạo form submit với extjs

– Tạo form submit cơ bản

Ext.create(‘Ext.form.Panel’, { … url: ‘add_user’, items: [ … ], buttons: [ { text: ‘Submit’, handler: function() { var form = this.up(‘form’).getForm(); // get the basic form if (form.isValid()) { // make sure the form contains valid data before submitting form.submit({ success: function(form, action) { Ext.Msg.alert(‘Success’, action.result.msg); }, failure: function(form, action) { Ext.Msg.alert(‘Failed’, action.result.msg); } }); } else { // display error alert if the data is invalid Ext.Msg.alert(‘Invalid Data’, ‘Please correct form errors.’) } } } ] });

– Các trường trên form được điền đầy đủ

– Phương thức isValid được gọi đến để xác minh có lỗi trong quá trình điền nội dung vào các trường không.

– Cuối cùng phương thức submit được gọi. Sau khi phương thức submit được hoàn tất nó sẽ trả về trạng thái thành công hoặc thất bại.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Xem thêm tại:Làm việc với form trong extjs