Code:
Ext.define('App.view.siswa.FormTambah', {
extend: 'App.widget.FormTambah',
alias : 'widget.edu-formTambahSiswa',
title : 'Input Data Siswa',
width: 700,
height: 450,
initComponent: function() {
this.items = [{
xtype: 'form',
url: baseUrl + 'Siswa/tambah.html',
bodyPadding: 20,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
width: 128,
items: [{
xtype: 'container',
style: 'text-align: center',
html: '<img src="images/icon_128/emblem-person.png" width="128" height="128"/>'
}]
}, {
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
margins: '0 0 0 20',
items: [{
xtype: 'container',
layout: 'anchor',
margins: '0 0 23 0',
defaults: {
xtype: 'textfield',
labelWidth: 135,
labelSeparator: '',
allowBlank: false
},
items: [{
xtype: 'numberfield',
name : 'nomorInduk',
fieldLabel: 'Nomor Induk',
hideTrigger: true,
allowDecimals: false,
minValue: 0
}, {
name : 'nama',
fieldLabel: 'Nama',
width: 454
}, {
xtype: 'edu-comboBoxKelas',
name : 'kelas',
fieldLabel: 'Kelas'
}]
}, {
xtype: 'tabpanel',
flex: 1,
bodyStyle: 'padding-top: 10px',
border: false,
plain: true,
items: [{
xtype: 'container',
title: 'Data Siswa',
layout: 'anchor',
defaults: {
xtype: 'textfield',
labelWidth: 135,
labelSeparator: ''
},
items: [{
xtype: 'numberfield',
name : 'testField',
fieldLabel: 'NISN',
hideTrigger: true,
allowDecimals: false,
minValue: 0
}, {
xtype: 'filefield',
name: 'foto',
fieldLabel: 'Foto',
iconCls: 'upload16',
buttonOnly: true,
buttonText: 'Pilih Foto...',
buttonConfig: {
iconCls: 'upload16'
}
}]
}, {
xtype: 'container',
title: 'Data Keluarga',
layout: 'anchor',
autoScroll: true,
defaults: {
xtype: 'textfield',
labelWidth: 135,
labelSeparator: ''
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Anak Ke',
layout: 'hbox',
defaults: {
xtype: 'numberfield',
allowDecimals: false,
labelSeparator: '',
labelWidth: 100
},
items: [{
name: 'anakKe',
minValue: 1,
width: 50,
margins: '0 35 0 0'
}}]
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Data Ayah',
defaults: {
xtype: 'textfield',
labelSeparator: '',
labelWidth: 80
},
items: [{
name: 'namaAyah',
fieldLabel: 'Nama Ayah',
width: 314
}]
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Data Ibu',
defaults: {
xtype: 'textfield',
labelSeparator: '',
labelWidth: 80
},
items: [{
name: 'namaIbu',
fieldLabel: 'Nama Ibu',
width: 314
}]
}]
}]
}]
}]
}];
this.callParent(arguments);
}, // initComponent
onShow: function(){
this.down('tabpanel').setActiveTab(0);
this.callParent(arguments);
}
});