Question

我使用extjs并且我想自定义表格中的第一行文本以加粗并增加字体大小。我没有找到行的任何唯一属性。有没有办法定制？

Answer 1

<强>解决方案：

使用Ext.grid.Panel和Ext.tree.Panel的'viewConfig'配置选项。以下是工作示例。

工作示例（网格面板）：

数据：customgrid.json

[
    {Id : '1', Name: 'Name 1'},
    {Id : '2', Name: 'Name 2'},
    {Id : '3', Name: 'Name 3'},
    {Id : '4', Name: 'Name 4'},
    {Id : '5', Name: 'Name 5'},
    {Id : '6', Name: 'Name 6'}
]

CSS：customgrid.css

.grid-firstrow .x-grid-cell { 
    font-weight: bold;
    font-size: 18;
}

网格：customgrid.html

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <link rel="stylesheet" type="text/css" href="./customgrid.css">
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">

Ext.define('testmodel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'Id', type: 'string'},
        {name: 'Name', type: 'string'}
    ]
});


Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.FocusManager.enable();
    Ext.Ajax.timeout = 100 * 1000;

    Ext.define('Test.Window', {
        extend: 'Ext.window.Window',

        closeAction: 'destroy',
        border: false,
        width: 560,
        height: 500,
        modal: true,
        closable: true,
        resizable: false,
        layout: 'fit',

        loadTestData: function() {
            var me = this;

            me.store.load();
        },

        initComponent: function() {
            var me = this;
            me.callParent(arguments);

            me.store = new Ext.data.Store({
                autoLoad: false,
                proxy: {
                    url: 'customgrid.json',
                    type: 'ajax',
                    reader: {type: 'json'},
                    writer: {type: 'json'}
                },
                model: 'testmodel'
            });

            me.grid = Ext.create('Ext.grid.Panel', {
                autoScroll: true,
                stripeRows: true,
                width: 420,
                height: 200,
                store: me.store,
                columnLines: false,
                columns : [
                    {header : 'Id', sortable : true, width : 50, dataIndex : 'Id'},
                    {header : 'Name', sortable : true, width : 100, dataIndex : 'Name'}
                ],
                viewConfig: {
                    getRowClass: function(record, index) { 
                        var css = '';
                        if (index == 0) {
                            css = 'grid-firstrow';
                        } else {
                            css = '';
                        }
                        return css;
                    }
                }
            });
            me.add(me.grid);

            me.loadTestData();
        }

    }); 


    var win = new Test.Window({

    });
    win.show();

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

工作示例（树面板）：

CSS：customtree.css

.tree-node .x-grid-cell-inner {
    font-weight: bold;
    font-size: 18px;
}

树：customtree.html

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <link rel="stylesheet" type="text/css" href="./customtree.css">
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){

        Ext.QuickTips.init();
        Ext.FocusManager.enable();
        Ext.Ajax.timeout = 100 * 1000;

        Ext.define('Test.Window', {
            extend: 'Ext.window.Window',

            closeAction: 'destroy',
            border: false,
            width: 560,
            height: 500,
            modal: true,
            closable: true,
            resizable: false,
            layout: 'fit',

            initComponent: function() {
                var me = this;
                me.callParent(arguments);

                me.store = new Ext.data.TreeStore({
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json'
                        }
                    },
                    model: 'usersw_model'
                });
                me.tree = new Ext.tree.Panel({
                    useArrows: true,
                    autoScroll: true,
                    animate: true,
                    enableDD: false,
                    width: '100%',
                    flex: 1,
                    border: false,
                    rootVisible: false,
                    allowChildren: true,
                    store: me.store,
                    root: {
                        expanded: true,
                        text: 'Ext JS',
                        draggable: false,
                        id: 'root'
                    },
                    viewConfig: {
                        getRowClass: function(record, index) { 
                            var css = '';
                            if (index == 0) {
                                css = 'tree-node';
                            } else {
                                css = '';
                            }
                            return css;
                        }
                    }
                });

                me.add(me.tree);

                var rootnode = me.tree.getRootNode();

                var parent1node = rootnode.appendChild({
                    text: 'Parent1',
                    leaf: false
                });
                parent1node.appendChild({
                    text: 'Child1',
                    leaf: true
                });
                parent1node.appendChild({
                    text: 'Child2',
                    leaf: true
                });
                parent1node.appendChild({
                    text: 'Child3',
                    leaf: true
                });

                var parent2node = rootnode.appendChild({
                    text: 'Parent2',
                    leaf: false
                });
                parent2node.appendChild({
                    text: 'Child1',
                    leaf: true
                });
                parent2node.appendChild({
                    text: 'Child2',
                    leaf: true
                });
                parent2node.appendChild({
                    text: 'Child3',
                    leaf: true
                });

                var parent3node = rootnode.appendChild({
                    text: 'Parent3',
                    leaf: false
                });

            }



        }); 


        var win = new Test.Window({

        });
        win.show();

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

Answer 2

您可以使用CSS：

tr:first-child {
    font-weight: bold;
    font-size: x-large;
}

或输出第一行单元格而不是td并以这种方式设置样式：

th {
    font-weight: bold;
    font-size: x-large;
}

如何使用extjs自定义表格中的第一行？

2 个答案: