extjs 组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了extjs 组件相关的知识，希望对你有一定的参考价值。
Ext.define(‘com.view.MyPanel‘, {
extend : ‘Ext.panel.Panel‘,
alias : ‘widget.MyPanel‘,
height : 150,
width : 170,
layout : {
align : ‘stretch‘,
type : ‘vbox‘
},
title : ‘‘,
config : {
displayname_com : null,
dislaystate_com : null,
dislayproduct_com : null,
dislaynum_com : null,
displayname : null,
dislaystate : null,
dislayproduct : null,
dislaynum : null
},
constructor : function(cfg) {
var me = this;
cfg = cfg || {};
me.displayname = cfg.displayname;
me.dislaystate = cfg.dislaystate;
me.dislayproduct = cfg.dislayproduct;
me.dislaynum = cfg.dislaynum;
me.callParent(arguments);
},
updatePanel : function(array, state, num) {
var me = this;
me.getDislaynum_com().setValue(num);
me.dislayproduct = array;
me.getDislaystate_com().setValue(state);
},
updatenum : function(x) {
var me = this;
me.getDislaynum_com().setValue(x);
},
updateProduct : function(array) {
var me = this;
// me.getDislayproduct_com().getStore().loadData(array);
me.dislayproduct = array;
},
updateDislayname : function(dislayname) {
var me = this;
me.getDisplayname().setValue(dislayname);
},
updateBorder : function(val) {
var me = this;
// 清空所有样式
// 单单给当前这个panel设置border
me.setBorder(val);
},
initComponent : function() {
var me = this;
me.itemId = me.displayname;
me.items = [{
xtype : ‘displayfield‘,
itemId : ‘__dislayname‘,
flex : 1,
labelWidth : 50,
// margin : ‘5 0 0 10‘,
value : me.displayname,
fieldLabel : ‘名称‘
}, {
xtype : ‘combo‘,
itemId : ‘__dislayproduct‘,
flex : 1,
store : me.dislayproduct,
labelWidth : 50,
// margin : ‘5 0 0 10‘,
fieldLabel : ‘产品名‘
}, {
xtype : ‘displayfield‘,
itemId : ‘__dislaystate‘,
flex : 1,
value : me.dislaystate,
labelWidth : 50,
// margin : ‘5 0 0 10‘,
fieldLabel : ‘状态‘
}, {
xtype : ‘displayfield‘,
itemId : ‘__dislaynum‘,
labelWidth : 50,
flex : 1,
value : me.dislaynum,
// margin : ‘5 0 0 10‘,
fieldLabel : ‘数量‘
}];
me.callParent(arguments);
me.displayname_com = me
.down(‘displayfield[itemId=__dislayname]‘);
me.dislaystate_com = me
.down(‘displayfield[itemId=__dislaystate]‘);
me.dislaynum_com = me.down(‘displayfield[itemId=__dislaynum]‘);
me.dislayproduct_com = me.down(‘combo[itemId=__dislayproduct]‘);
me.on("afterrender", function(pnl) {
pnl.body.el.on(‘click‘, function() {
me.fireEvent(‘clickpanel‘, me, me);
me.fireEvent(‘clickpanelChangeColor‘,
me, me);
})
});
// me.body.dom.el.on("click",function(){
// me.fireEvent(‘clickpanel‘,me,me.getDisplayname().getValue());
// });
},
/**
* 改变背景颜色
*
* @param {}
* col
*/
changeColor : function(col) {
var me = this;
if (col) {
me.setBodyStyle({
‘background-color‘ : ‘rgba(165, 154, 29, 0.75)‘
});
// me.body.el.setStyle({
// ‘background-color‘ : ‘rgba(165, 154, 29, 0.75)‘
// });
} else {
me.setBodyStyle({
‘background-color‘ : ‘#ffffff‘
});
// me.body.el.setStyle({
// ‘background-color‘ : ‘#ffffff‘
// });
}
}
})
本文出自 “橡树” 博客，谢绝转载！
以上是关于extjs 组件的主要内容，如果未能解决你的问题，请参考以下文章