extjshtml的简单介绍

更新：2022-11-10 14:38

本文目录一览：

1、请问ExtJs如何获取html内容,谢谢
2、怎样在Extjs框架中嵌入html
3、如何获得ExtJS中嵌入HTML中的元素，取值或设值？

请问ExtJs如何获取html内容,谢谢

如图所示
要获取html内容，需要先获取dom对象
Ext使用query类选择器就能获取，由于获取的是集合，所以如果只有一个，就是数组下标0的对象。
故，html文本用 Ext.query('.xxx')[0].innerHTML 获取
html文本用 Ext.query('.xxx')[0].outerHTML 获取

怎样在Extjs框架中嵌入html

用html属性

{bodyStyle:'background:#069;color:#FFF;font-size:12px;padding-top:12px;',html:'欢迎您！管理员'}

完整案例：

var hd = {
    region: 'north',
    height: 40,
    bodyStyle: 'background:#069;color:#FFF;font-size:12px;padding-top:12px;',
    html: '欢迎您！管理员'
};
var mainMenu = {
    id: 'menu_panel',
    region: 'west',
    title: '功能菜单',
    iconCls: 'icon_menu',
    split: true,
    width: 135,
    minSize: 100,
    maxSize: 250,
    margins: '2 0 5 5',
    cmargins: '2 5 5 5',
    collapsible: true,
    bodyBorder: false,
    bodyStyle: 'background-color:#DFE8F6',
    layout: {type: 'accordion', animate: false},
    defaults: {border: false, bodyStyle: 'padding:0px'},
    items: []
};
var modulePanel = {
    id: 'module_panel',
    region: 'center',
    border: false,
    layout: 'card',
    margins: '2 5 5 0',
    cmargins: '2 5 5 5',
    activeItem: 0,
    items: [
        {title: '欢迎进入管理系统 V1.0', id: 'dashboard', html: '内容区'}
    ]
};
var viewport = new Ext.Viewport({
    layout: 'border',
    items: [hd, mainMenu, modulePanel]
});
viewport.doLayout();

如何获得ExtJS中嵌入HTML中的元素，取值或设值？

按照extjs思路，可以根据id和样式表来取
给你个例子你研究一下

initComponent: function () {
    this.callParent(arguments);
    this.on("viewready", function () { // 在所有组件已经渲染成功时调用
        this.addclickevent();
    }, this, {single: true})
}
addclickevent: function () {
    var kk = Ext.query(".mkiconbutton", false, this.getEl().dom); // 这句话是查询样式表,你改成你html中需要取得样式表就行，到这里你就可以控制取值或赋值
    for (var i = 0; i < kk.length; i++) {
        this.mon(kk[i], "click", this.mkitemclick, this);
    }
}