Невозможно изменить ширину поля в css - используя среду extjs - PullRequest
Новая
       10

Невозможно изменить ширину поля в css - используя среду extjs

0 голосов
/ 01 мая 2018

Я пробовал ниже код в CSS: 

.x-form-field {
    margin-left: 10px;
    width: 50%;
    font: bold 22px;
    table-layout: fixed;
    width: 10px;
    background: grey;
}

Панель инструментов Extjs

И благодаря этому я могу изменять шрифт, цвет, границы и поля, но не могу изменять ширину поля.

Я хочу, чтобы ширина по умолчанию была 60 px;

Я раньше не работал над css, но я боролся с этим последние 2 часа. Я мог бы что-то упустить. Пожалуйста, помогите!

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете напрямую использовать inputItemWidth config pagingtoolbar, чтобы установить ширину поля ввода.

inputItemWidth в пикселях поля ввода, используемого для отображения и изменения номера текущей страницы.

В этом FIDDLE я создал демо, используя inputItemWidth внутри pagingtoolbar. Я надеюсь, что это поможет / поможет вам в достижении ваших требований.

КОД SNIPPET 

Ext.application({
    name: 'Fiddle',

    launch: function () {

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {

            pageSize: 50,

            autoLoad:true,

            fields: [
                'title', {
                    name: 'replycount',
                    type: 'int'
                }
            ],

            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: '//www.sencha.com/forum/topics-browse-remote.php',
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                }
            }
        });



        Ext.create('Ext.grid.Panel', {

            height: window.innerHeight,

            title: 'Demo',

            store: store,

            loadMask: true,

            // grid columns
            columns: [{
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                sortable: false
            }, {
                text: "Replies",
                dataIndex: 'replycount',
                width: 70,
                align: 'right',
                sortable: true
            }],

            // paging bar on the bottom
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display",
                inputItemWidth: 60
            }),

            renderTo: Ext.getBody()
        });
    }
});
...