Extjs 기본 Form 요소
11777 단어 ExtJs
var txtName = new Ext.form.TextField({
fieldLabel: ' ',
anchor: '90%'
});
2. 드롭다운 상자
var storeCheckPoint = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['Sales Type', 'Sales Type'],
[' ', ' '],
[' ', ' '],
[' ', ' '],
[' ', ' '],
[' ', ' '],
['D-Cate', 'D-Cate'],
[' ', ' ']
]
});
var cboTypeCheckPoint = new Ext.form.ComboBox({
fieldLabel: ' ',
mode: 'local',
width: 100,
store: storeCheckPoint,
value: "Sales Type",
valueField: 'value',
displayField: 'text',
editable: false,
triggerAction: 'all',
forceSelection: true
});
3. 라디오 버튼
var ImportExportType = new Ext.form.RadioGroup({
fieldLabel: ' ',
anchor: '50%',
id: 'rdoBelongsTo',
columns: 2,
vertical: true,
items: [
{ boxLabel: ' ', name: 'rdoImportExportType', inputValue: '1', checked: true },
{ boxLabel: ' ', name: 'rdoImportExportType', inputValue: '2' }
]
});
4. 날짜 컨트롤
var CurrentDate = new Ext.form.DateField({
fieldLabel: '',
anchor: '50%',
format: 'Y-m-d',
value: new Date(),
allowBlank: false
});
5. 버튼
var btnReset = new Ext.Button({
text: ' ',
iconCls: 'icon_reset',//
handler: function() {
Ext.Msg.show({
title: ' ',
msg: ' ?',
buttons: Ext.Msg.YESNO,
fn: function(button, text) {
if (button == 'yes') {
formPanel.form.reset();
}
},
icon: Ext.MessageBox.QUESTION
});
}
});
7. 텍스트 필드
//
var txtRemark = new Ext.form.TextArea({
fieldLabel: ' ',
id: 'txtRemark',
name: 'COMMENTSAPPAND',
anchor: '50%',
maxLength: 500,
height: 100
});
8. 숫자 텍스트 상자
var txtChuhuoDateWarn = new Ext.form.NumberField({
fieldLabel: ' ',
id: "txtChuhuoDateWarn",
allowBlank: false,
tabIndex: 60,
width: "60%"
});
9. 확인란
//
var chkBuilding = new Ext.form.CheckboxGroup({
fieldLabel: jsonDataDictionary.labJZW,
tabIndex: 175,
width: 480,
columns: 3,
items: [
//
{boxLabel: jsonDataDictionary.labXJ, name: '0', inputValue: '0' },
//
{boxLabel: jsonDataDictionary.labGJ, name: '1', inputValue: '1' },
//
{boxLabel: jsonDataDictionary.labQT, name: '2', inputValue: '2' }
],
listeners: {
'change': function() {
var tks;
for (var i = 0; i < chkBuilding.items.length; i++) {
if (chkBuilding.items.itemAt(i).checked) {
if (chkBuilding.items.itemAt(i).name == "2") {
tks = "YT";
}
}
}
//
if (tks == "YT") {
txtOtherBuilding.enable();
txtOtherBuilding.getEl().up('.x-form-item').setDisplayed(true);
} else {
txtOtherBuilding.disable();
txtOtherBuilding.getEl().up('.x-form-item').setDisplayed(false);
}
}
}
});
10. 양식 도구 모음
var tbCPForm = new Ext.Toolbar({
items: [
{ xtype: "tbspacer" },//
{ xtype: "tbspacer" },
{ xtype: "tbspacer" },
{ xtype: "tbspacer" },
btnCPReset,//
{ xtype: "tbseparator" },
btnCPSubmit,//
{ xtype: "tbseparator" }
]
});
11.form 양식
var pnForm1 = new Ext.form.FormPanel({
title: ' ',
labelAlign: 'right',
buttonAlign: 'left',
labelWidth: 100,
padding: 20,
autoWidth: true,
autoScroll: true,
items: [
{
columnWidth: 1,
layout: 'form',
border: false,
items: []
}
]
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.