获取面板主体样式 extjs6

Question

new Ext.Panel({
        layout: 'absolute',
        id: 'mainPanel',
        border: false,
        bodyStyle: "background-image:url(wall.jpg) !important"
});

console.log(Ext.getCmp('mainPanel').getStyle());

我正在尝试使用 getStyle() 方法获取 body Style，但它在控制台上出现错误

Uncaught TypeError: Object [object Object] has no method 'getStyle'

然而 getStyle 是面板方法之一，但为什么会出现此错误或任何人都可以更正我的代码？谢谢

Answer 1

new Ext.Panel({
        layout: 'absolute',
        id: 'mainPanel',
        border: false,
        bodyStyle: "background-image:url(wall.jpg) !important"
});

console.log(Ext.getCmp('mainPanel').getBodyStyle());

属性 bodyStyle 默认应该有一个 getter 和一个 setter，我不明白你使用的是哪个分机，所以你可以简单地像这样分配 bodyStyle如果 get 方法不起作用。

console.log(Ext.getCmp('mainPanel').bodyStyle);

如果您想获取分配给 dom 属性的值，您可以这样做：

console.log(Ext.fly('mainPanel-body').style.backgroundImage);

Ext.fly returns 'mainPanel-body' 的 HTML 元素，它是面板的主体。

Answer 2

您需要使用 bodyStyle 面板对象属性。这样它就可以在几乎所有版本的 ExtJS.

上运行

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var panel = Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            width: 200,
            html: '<p>World!</p>',
            layout: 'absolute',
            id: 'mainPanel',
            border: false,
            bodyStyle: "background-image:url(wall.jpg) !important",
            renderTo: Ext.getBody()
        });
        console.log(Ext.getCmp('mainPanel').bodyStyle);
    }
});

<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>

<link type="text/css" rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css")/>

获取面板主体样式 extjs6

get panel body style extjs6

javascript

styles

extjs