如何从ExtJs中的面板获取html内容

Question

我是ExtJs的新手.获取面板html内容时,我一直面临着面板问题.

xtype : 'panel',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
    render : function(c) {
        c.body.on('click', function() {
            alert('' + this.id);
            alert(Ext.getCmp('first_block').items.getAt(0).getValue());
        });
}

我没有得到HTML内容,但我得到像"first_block-body"的id.

提前致谢.

Answer 1

该html属性在组件的内容中定义了所需的HTML,在本例中为Ext.Panel.

Ext.Panel创建几层divs以提供页眉,页脚,工具栏等内容.

如果您想要的只是div一些内容,那么您想要使用Ext.Component.组件没有body,所以代码中的一些变化.

xtype : 'component',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
    render : function(c) {
        c.on('click', function() {
            alert('' + this.id);
            alert(this.el.dom.innerHTML);
        }, this);
}

请注意,我在on调用中添加了第三个参数,它指定this了函数调用的范围.我还编辑了你的警报,打印出元素的innerHTML,假设你正在尝试做什么.

更新:

如果你打算在布局中使用这个组件,它可能需要能够拥有它height和widthset,这意味着它需要是一个类型box才能成为一个Ext.BoxComponent.