Example Forms Plugin

Just some demo code

by kpespisa

HTML

<link rel="stylesheet" href="http://dev.sencha.com/ext/5.0.1/examples/shared/example.css">
<script src="http://dev.sencha.com/ext/5.0.1/examples/shared/options-toolbar.js"></script>
<script src="http://dev.sencha.com/ext/5.0.1/examples/shared/include-ext.js"></script>
<body>
    <h1>Example Forms Plugin</h1>
    <div id="properties-grid"></div>
</body>

CSS

.new {
    background-image: url('http://dev.sencha.com/ext/5.0.1/examples/shared/icons/fam/add.gif') !important;
}

.edit {
    background-image: url('http://dev.sencha.com/ext/5.0.1/examples/shared/icons/fam/cog_edit.png') !important;
}

.delete {
    background-image: url('http://dev.sencha.com/ext/5.0.1/examples/shared/icons/fam/delete.gif') !important;
}

JavaScript

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*',
    'Ext.form.*'
]);

Ext.onReady(function(){
    
    // Define our CustomProperty data model
    Ext.define('CustomProperty', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'name', type: 'string' },
            { name: 'value', type: 'string' },
            { name: 'isEncrypted', type: 'bool' },
            { name: 'isPromptUser', type: 'bool' }
        ]
    });

    // Generate mock data for custom properties
    var data = (function() {
        var data = [ 
                    { name: 'VMware.VirtualCenter.OperatingSystem', value: 'windows7Guest' },
                    { name: 'CostCenter', value: 'abc' },
                   ];
        return data;
    })();

    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        // destroy the store if the grid is destroyed
        autoDestroy: true,
        model: 'CustomProperty',
        proxy: {
            type: 'memory'
        },
        data: data,
        sorters: [{
            property: 'name',
            direction: 'DESC'
        }]
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false,
        saveBtnText  : 'Save',
    });

    // create the grid and specify what field you want
    // to use for the editor at each column.
    var grid = Ext.create('Ext.grid.Panel', {
        id: 'grid',
        store: store,
        columns: [{
            header: 'Name',
            dataIndex: 'name',
            flex: 1,
            editor: {
                // defaults to textfield if no xtype is supplied
                allowBlank: false
            }
        }, {            
            header: 'Value',
            dataIndex: 'value',
            flex: 1,
            editor: {
                allowBlank: false
            },         
            renderer: function(value, metaData, record) {               ...