css - 无法更改 css 中框的宽度 - 使用 extjs 框架

Question

我已经在 css 中尝试了以下代码:

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

Extjs tool bar

有了这个，我可以更改字体、颜色、边框和边距，但不能更改框的宽度。

我希望默认宽度为 60 px;

我以前没有研究过 css，但过去 2 个小时我一直在努力解决这个问题。我可能忽略了一些东西。请帮忙!

Answer 1

可以直接使用inputItemWidth pagingtoolbar 的配置设置输入框的宽度。

inputItemWidth in pixels of the input field used to display and change the current page number.

在这个 FIDDLE ，我在 pagingtoolbar 中使用 inputItemWidth 创建了一个演示。我希望这会帮助/指导您实现您的要求。

代码片段

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()
        });
    }
});