ExtJS Template

by el_chief

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

Ext.define('Inventory', {
    extend: 'Ext.data.Model',
    fields: [
        'id',
        'vehicle_id',
        'stock_number',
        'price',
        'category',
        'sharing'
        ]
});


Ext.define('Vehicle', {
    extend: 'Ext.data.Model',
    fields: ['id'],
    hasOne: [{
        name: 'inventory',
        instanceName: 'InventoryHasOneInstance',
        model: 'Inventory',
        getterName: 'getInventory',
        setterName: 'setInventory',
        foreignKey: 'vehicle_id'}
                                                            ]
});

Ext.define('F1', {
    extend: 'Ext.window.Window',

    height: 266,
    width: 351,
    layout: {
        type: 'fit'
    },
    title: 'Inventory',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                xtype: 'form',
                layout: 'auto',
                bodyPadding: 10,
                preventHeader: true,
                title: 'My Form',
                items: [
                    {
                    xtype: 'textfield',
                    name: 'stock_number',
                    fieldLabel: 'Stock Number',
                    anchor: '100%'},
                {
                    xtype: 'numberfield',
                    name: 'price',
                    step: 500,
                    minValue: 0,
                    allowBlank: false,
                    fieldLabel: 'Price',
                    anchor: '100%'},
                {
                    xtype: 'combobox',
                    name: 'category',
                    fieldLabel: 'Category',
                    forceSelection: true,
                    allowBlank: false},
                {
                    xtype: 'combobox',
                    name: 'sharing',
                    fieldLabel: 'Sharing',
                    queryMode: 'local',
                    forceSelection: true,
                    allowBlank: false}
                ],
  ...