grid scrolling
 

Есть окно, в котором grid таблица. Что нужно указать чтобы данные скролились при этом тулбар и наименование колонок оставались на месте? Сейчас у меня скрол стоит в окне, но этот вариант скролит тулбар и наименование колонок. Код ниже:

var win = new Ext.Window({

        modal: true,
        width:600,
        height:400,
        autoScroll: true,
        title: 'Свойства объекта: '+record.data.nm,
        layout:'auto',
        bodyStyle:{'background-color': '#FFFFFF'},

        items: [
            {
                xtype: 'gridpanel',
                title: 'My Grid Panel',
                itemId: 'Trail',
                id: 'Trail',
                header: false,
                width: '100%',
                store: 'Trailer',

                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'name',
                        width: '50%',
                        text: 'Наименование',
                        blankText: 'Содержимое поля не может быть пустым',
                        flex: 1,
                        editor: {
                            // defaults to textfield if no xtype is supplied
                            allowBlank: false,
                            blankText: 'Содержимое поля не может быть пустым'
                        }
                    },
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'id',
                        formatter: 'round(0)',
                        format: '0',
                        width: '25%',
                        text: 'Код',
                        editor: {
                            allowBlank: false,
                            formatter: 'round(0)',
                            blankText: 'Содержимое поля не может быть пустым'

                        }

                    },
                    {
                        xtype: 'numbercolumn',
                        dataIndex: 'width',
                        width: '25%',
                        format: '0.00',
                        text: 'Ширина',
                        editor: {
                            //xtype: 'numbercolumn',
                            allowBlank: false,
                            blankText: 'Содержимое поля не может быть пустым'
                        }

                    }                   

                ],


                tbar: [  // верхний тулбар с кнопками удаления и вставки

                    {

                        text: 'Добавить прицеп',
                        icon : 'image/add.jpg',

                        handler : function() {
                            rowEditing.cancelEdit();

                            // Create a model instance
                            var r = Ext.create('MyApp.model.Trailer', {
                                name: 'Новый прицеп',
                                id: '0',
                                width: '0.00'
                            });

                            store.insert(0, r);
                            rowEditing.startEdit(0, 0);
                        }
                    },


                    {

                        itemId: 'removeTrail',
                        text: 'Удалить прицеп',
                        icon : 'image/delete-icon.png',

                        handler: function() {

                        var sm = Ext.getCmp('Trail').getSelectionModel();
                                rowEditing.cancelEdit();
                            rec = sm.getSelection();

                            Ext.Msg.confirm("Удаление", "Вы действительно хотите удалить прицеп<b> " + rec[0].data.name +'</b>?', function(button){

                            if (button == 'yes') {

                                store.remove(rec);

                            if (store.getCount() > 0) {
                                sm.select(0);
                            }

            } else {
                return false;
            }
        });

                        },

                        disabled: true

                    }],

                plugins: [rowEditing],
                listeners: {
                    'selectionchange': function(view, records) {
                        Ext.getCmp('Trail').down('#removeTrail').setDisabled(!records.length);
                    }
                }

            }

        ]

    });

    win.show();
}

а можно скрин показать? как сейчас

Но вы поняли у меня скролится весь грид и tbar, если убираю autoScroll: true в настройках окна, тогда скрол убирается и нельзя увидеть все данные.

оно?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>

    <link rel="stylesheet" type="text/css" href="http://docs.sencha.com/extjs/4.2.2/extjs-build/resources/css/ext-all-neptune-debug.css" />
    <script type="text/javascript" src="http://docs.sencha.com/extjs/4.2.2/extjs-build/ext-all.js"></script>
    <script type="text/javascript">
Ext.onReady(function(){
    var store = Ext.create('Ext.data.Store', {
        pageSize: 50,
        fields: ['title', 'username'],
        remoteSort: true,
        proxy: {
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an HttpProxy would be better
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        },
		autoLoad: true
    });

    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        store: store,
        columns:[{
            id: 'topic',
            text: "Topic",
            dataIndex: 'title',
            flex: 1,
            sortable: false
        },{
            text: "Author",
            dataIndex: 'username',
            width: 100
        }],
		tbar: [{xtype: 'button', text: 'click me'},
		{xtype: 'button', text: 'click me'}]
    });

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    layout: 'fit',
    items: grid
}).show();

});
	</script>
</head>
<body>
</body>
</html>

Я понял для окна нужно было указать layout: 'fit'. Спасибо!

Скажите пожалуйста имею grid код выше, при добавлении новой строки и ввода данных, как эти данные я могу собрать чтобы можно было отправить их на сервер? Спасибо!

В стор добавьте autosync = true и пропишите в прокси адрес для добавления данных: http://docs.sencha.com/extjs/5.0.1/#...Server-cfg-api