Ext 4.1.0 Experiments

by markmsmith

HTML

<script src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">
<!DOCTYPE html>
<html>
<head>
    <title>LookbackApp</title>
    <script type="text/javascript>
    /*
    items: [
        {
            xtype: 'rallytextfield',
            fieldLabel: 'Query',
            itemId: 'queryField',
            value: '{ObjectID: {$exists:true}}'
        },
        {
            xtype: 'rallybutton',
            text: 'Search',
            itemId: 'searchButton'
        },
        {
            xtype: 'panel',
            itemId: 'gridHolder',
            layout: 'fit'
        }
    ],
    */

    </script>

</head>
<body>
</body>
</html>

JavaScript

Ext.require([
    'Ext.form.*',
    'Ext.window.Window'
]);

Ext.onReady(function() {
    var pan = Ext.create('Ext.panel.Panel', {
        width: '100%',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items:[
            {
                xtype: 'panel',

                layout: 'anchor',
                border: true,
                fieldDefaults: {
                    labelWidth: 40
                },
                defaultType: 'textfield',
                bodyPadding: 5,
        
                items: [
                    {
                        fieldLabel: 'Query',
                        name: 'query',
                        anchor:'100%',
                        width: 700,
                        height: 300,
                        xtype: 'textarea'
                    },
                    {
                        fieldLabel: 'Fields',
                        name: 'fields',
                        anchor: '100%',
                        width: 700
                    }
                ],
                
                buttons: [
                    {
                        text: 'Search',
                        itemId: 'searchBtn'
                    }
                ]
            },
            {
                xtype: 'panel',
                itemId: 'gridHolder'
            }
        ],
        
        renderTo: Ext.getBody()
    });
    
    var searchClicked = function(){
        var holder = pan.down('#gridHolder');
        holder.removeAll(true);
        /*
        var grid = {
            xtype: 'grid'
        };
        holder.add(grid);
        */
    };
    
    pan.down('#searchBtn').on('click', searchClicked);

});