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

Question

我已经尝试在CSS中的以下代码：

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

Extjs工具栏

而且，我可以更改字体，颜色，边框和边距，但不能更改框的宽度。

我希望默认宽度为60 px;

我以前没有从事过CSS的工作，但是过去2个小时我一直在为此苦苦挣扎。 我可能忽略了某些东西。请帮忙！

Answer 1

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

inputItemWidth用于显示和更改当前页码的输入字段的像素。

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

代码片段

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