Grid example

by rogaldh

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>

CSS

body {
    padding: 20px
}

JavaScript

Ext.onReady(function () {

    var grid = function (config) {
        config = Ext.applyIf(config || {}, {
            renderTo: Ext.getBody(),
            sortable: false,
            height: 300,
            store: new Ext.data.JsonStore({
                mode: 'local'
            }),
            tbar: new Ext.Toolbar({
                items: [{
                    xtype: 'combo',
                    displayField: 'name',
                    valueField: 'id',
                    name: 'user',
                    mode: 'local', //remote if you want to load data async
                    store: new Ext.data.JsonStore({
                        root: 'results',
                        totalProperty: 'total',
                        fields: ['id', 'name'],
                        data: {
                            results: [{
                                id: 123,
                                name: '666'
                            }],
                            total: 1
                        }
                    })
                }, {
                    text: 'Добавить',
                    bubbleEvents: ['onBtnClick'],
                    listeners: {
                        click: {
                            scope: this,
                            fn: function () {
                                this.fireEvent('onBtnClick');
                            }
                        }
                    }
                }]
            }),
            fields: ['id', 'name'],
            columns: [{
                header: 'id',
                dataIndex: 'id'
            }, {
                header: 'name',
                dataIndex: 'name'
            }],
            listeners: {
                onBtnClick: function () {
                    var combo = this.getTopToolbar().find('name', 'user')[0];

                    if (!combo) return;

                    if (!combo.getValue()) {
                        Ext.Msg.alert('error', 'no value');
        ...