Test Search Field

Just some demo code

by KevinABoucher

HTML

<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>
<link rel="stylesheet" href="http://dev.sencha.com/ext/5.0.1/examples/shared/example.css">
<link rel="stylesheet" href="http://dev.sencha.com/extjs/5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
<body>
    <h1>Test Search Field</h1>
    <div id="machine-image-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.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'http://dev.sencha.com/extjs/5.0.0/examples/ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.ux.form.SearchField'
]);

Ext.onReady(function(){
    // Define our MachineImage data model
    Ext.define('MachineImage', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'ami', type: 'string' },
            { name: 'source', type: 'string' },
            { name: 'visibility', type: 'string' },
            { name: 'status', type: 'string' },
            { name: 'platform', type: 'string' },
            { name: 'region', type: 'string' },
            { name: 'description', type: 'string' }
        ]
    });

    // Generate mock data for machine images
    var data = (function() {
        var data = [ 
            { ami: 'ami-74dc241d', source: '908437342586/Win2k8SP2x32_small', visibility: 'private', status: 'available', platform: 'Windows', region: 'us-east-1', description: 'test 1' },
            { ami: 'ami-f0ce3699', source: '908437342586/SUSE_small', visibility: 'private', status: 'available', platform: '', region: 'us-east-1', description: 'test 2' }
                   ];
        return data;
    })();

    // create the Data Store
    var store = Ext.create('Ext.data.BufferedStore', {
        id: 'store',
        model: 'MachineImage',
        pageSize: 25,
        proxy: {
            type: 'memory',
            data: data,
            simpleSortMode: true,
            filterParam: 'query',
            encodeFilters: function(filters) {
                return filters[0].value;
            }
        },
        remoteFilter: true,
        autoLoad: true
    });

    // create the grid and specify what field you want
    // to use for the editor at each column.
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        loadMask: true,
        columns: [{
            header: 'AMI ID',
            dataIndex: 'ami',
          ...