Question

Extjs 4如何自定义Panel

我想自定义一个panel，为了重复利用，想要创建出来高度和宽度都是200，并且背景色为红色，哪位高手给个例子，分不多了，不好意思

Answer 1

要达到你的效果，可以用2种方法

1是每次使用都new一个panel组件，使用相同配置

2是只创建一个panel组件，每次使用时更新它的内容

这里你自己取舍吧

方法1

function createNP(target){
    var config = {
        width: 200,
        height: 200,
        bodyStyle: {
            background: '#F00'
        },
        renderTo: target
    };
    return Ext.create('Ext.panel.Panel', config);
}

方法2

var p = Ext.create('Ext.panel.Panel', {
    width: 200,
    height: 200,
    bodyStyle: {
        background: '#F00'
    },
    renderTo: Ext.getBody()
});
p.update('字符串或html');
p.removeAll();
p.add({
    //新组件
})

Answer 2

我觉得要用用继承的方式来做更好，也符合Ext的开发思路
Ext.define('MyPanel', {

extend : 'Ext.panel.Panel',

width : 200,

height : 200,

bodyStyle : {

background: 'red'

}

});

//测试
Ext.create('MyPanel', {

renderTo : 'tab_control',//元素的id

title:'MyPanel'

});