Code:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.container.Viewport',
margin: '10 0 0 10',
autoScroll: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'fieldcontainer',
height: 38,
margin: '10 0 0 15',
width: 576,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'displayfield',
maxHeight: 25,
maxWidth: 320,
name: 'account_name',
value: 'J Technics\n',
fieldLabel: 'Account Name',
flex: 1
},
{
xtype: 'displayfield',
maxWidth: 160,
width: 160,
name: 'tech_assigned_to',
value: 'Walter',
fieldLabel: 'Date Tech Updated',
flex: 1,
margins: '0 0 0 20'
}
]
},
{
xtype: 'fieldcontainer',
height: 120,
margin: '10 0 0 15',
maxHeight: 85,
width: 576,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'fieldcontainer',
height: 120,
width: 289,
flex: 1,
items: [
{
xtype: 'displayfield',
autoShow: false,
height: 50,
maxHeight: 50,
maxWidth: 300,
width: 300,
name: 'maint_address',
value: 'test',
fieldLabel: 'Address of Service Site'
},
{
xtype: 'displayfield',
autoShow: false,
margin: '10 0 0 0',
maxHeight: 25,
maxWidth: 180,
name: 'maint_order_number',
fieldLabel: 'Work Order #'
}
]
},
{
xtype: 'fieldcontainer',
height: 120,
maxWidth: 230,
width: 200,
flex: 1,
margins: '0 0 0 20',
items: [
{
xtype: 'displayfield',
maxHeight: 25,
maxWidth: 180,
name: 'maint_customer_name',
fieldLabel: 'Contact',
labelWidth: 65
},
{
xtype: 'displayfield',
maxHeight: 25,
maxWidth: 180,
name: 'maint_phone',
fieldLabel: 'Phone #',
labelWidth: 65
}
]
}
]
},
{
xtype: 'displayfield',
margin: '10 0 0 15',
width: 553,
name: 'gpscord',
fieldLabel: 'GPS Quadrants'
},
{
xtype: 'displayfield',
margin: '10 0 0 15',
width: 551,
fieldLabel: 'Maintenance Required'
},
{
xtype: 'fieldcontainer',
height: 40,
margin: '15 0 0 10',
width: 650,
layout: {
align: 'stretch',
type: 'hbox'
},
fieldLabel: 'Hours:',
items: [
{
xtype: 'textfield',
width: 120,
fieldLabel: 'Spring Budget',
labelWidth: 60
},
{
xtype: 'textfield',
width: 120,
fieldLabel: 'Summer Budget',
labelWidth: 60,
margins: '0 0 0 10'
},
{
xtype: 'textfield',
width: 120,
fieldLabel: 'Fall Budget',
labelWidth: 60,
margins: '0 0 0 10'
},
{
xtype: 'textfield',
width: 120,
fieldLabel: 'Winter Budget',
labelWidth: 60,
margins: '0 0 0 10'
}
]
},
{
xtype: 'fieldcontainer',
height: 139,
width: 573,
items: [
{
xtype: 'fieldcontainer',
height: 23,
margin: '10 0 0 15',
width: 573,
fieldLabel: 'P.O. Request',
labelWidth: 230,
items: [
{
xtype: 'checkboxgroup',
width: 200,
items: [
{
xtype: 'checkboxfield',
boxLabel: 'Yes'
},
{
xtype: 'checkboxfield',
boxLabel: 'No'
}
]
}
]
},
{
xtype: 'fieldcontainer',
height: 23,
margin: '10 0 0 15',
width: 573,
fieldLabel: 'Filters Needed Next Maintenance',
labelWidth: 230,
items: [
{
xtype: 'checkboxgroup',
width: 200,
items: [
{
xtype: 'checkboxfield',
boxLabel: 'Yes'
},
{
xtype: 'checkboxfield',
boxLabel: 'No'
}
]
}
]
},
{
xtype: 'fieldcontainer',
height: 23,
margin: '10 0 0 15',
width: 573,
fieldLabel: 'Sceduled Repairs "Date Stamp"',
labelWidth: 230,
items: [
{
xtype: 'checkboxgroup',
width: 200,
items: [
{
xtype: 'checkboxfield',
boxLabel: 'Yes'
},
{
xtype: 'checkboxfield',
boxLabel: 'No'
}
]
}
]
},
{
xtype: 'fieldcontainer',
height: 23,
margin: '10 0 0 15',
width: 314,
fieldLabel: 'Belts Required Next Maintenance',
labelWidth: 230,
items: [
{
xtype: 'checkboxgroup',
width: 200,
items: [
{
xtype: 'checkboxfield',
boxLabel: 'Yes'
},
{
xtype: 'checkboxfield',
boxLabel: 'No'
}
]
}
]
}
]
},
{
xtype: 'fieldcontainer',
height: 40,
width: 654,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'button',
margin: '0 0 0 10',
text: 'Log In/Out',
flex: 1
},
{
xtype: 'filefield',
margin: '0 0 0 10',
fieldLabel: 'Attach W/O',
flex: 1
},
{
xtype: 'filefield',
name: 'mopic',
fieldLabel: 'Attach Picture',
flex: 1,
margins: '0 0 0 10'
}
]
},
{
xtype: 'textfield',
margin: '15 0 0 10',
fieldLabel: 'Signature'
}
]
});
me.callParent(arguments);
}
});