2018-7-30
1 研究ext[button]自定義樣式的問題
比較復(fù)雜(深度定制化自己頁面的請繞路)藐石，建議如果需要修改button的背景顏色以及其中字體修改的可以考慮以下方案
- 如果要求兼容性（即兼容IE8溉卓、9）等建議使用圖片方式
- FF、chrom可以直接支持背景顏色
- IE10及其以上等可以自定義樣式
/**longinButton 是需要應(yīng)用的button**/
.loginButton{
background:#46a546;/**背景顏色**/
border: none;!important;
}
.loginButton .x-btn-inner {/**button中的字體在這里設(shè)置**/
color: #ffffff;
font-size:18px;
height:20px;
}
.loginButton.x-btn-default-small.x-btn-over{/**鼠標(biāo)浮動上去的樣式**/
background: #4cc54c !important;
border-color: #4cc54c !important;
background-color: #4cc54c !important;
background-image: none !important;
}
/**點擊時的樣式等各種樣式也可以采取類似的方式實現(xiàn)**/
- 參考網(wǎng)址:https://stackoverflow.com/questions/27649281/extjs-how-to-customize-buttons
- 樣式演示地址:https://fiddle.sencha.com/#fiddle/fim&view/editor
2 二維碼配置界面
想把按鈕直接放在最下面夭织，使用bbar、tbar等時會出現(xiàn)一條線，樣式不符合的不要使用這種了
2018-07-31
1 研究Ext[Form]字段自動換行
可以實現(xiàn)自動換行,需要設(shè)置布局layout:column,然后為每一個字段指定百分比的寬度楔敌。以下是示例：
Ext.define('Learn.home.LearnHome',{
extend:'Ext.form.Panel',
title:'測試panel',
width:750,
height:500,
layout: "column",
fieldDefaults:{
labelWidth:70,
labelAlign:"right"
},
initComponent:function(){
var me = this;
me.callParent();
var fields = this.initFileds();
Ext.each(fields,function(field,index){
me.add(field);
});
},
initFileds:function(){
var filelds = new Array();
var userNameFiled = {
xtype:'textfield',
name:'name',
fieldLabel:'姓名',
height:20,
columnWidth:.30,
width:'100%',
margin:'10 0 0 10'
};
var userNameEnFiled = {
columnWidth:.30,
xtype:'textfield',
name:'enName',
fieldLabel:'英文名',
height:20,
width:'100%',
margin:'10 0 0 10'
};
var userPassPortFiled = {
xtype:'textfield',
name:'passport',
fieldLabel:'護照號',
columnWidth:.30,
height:20,
width:'100%',
margin:'10 0 0 10'
};
var outControyFiled = {
xtype:'textfield',
name:'outControy',
fieldLabel:'出訪國家',
columnWidth:.30,
height:20,
width:'100%',
margin:'10 0 0 10'
};
var newOutControyFiled = {
xtype:'textfield',
name:'newOutControy',
fieldLabel:'出訪國家',
columnWidth:1,
height:20,
width:'100%',
margin:'10 0 0 10'
};
filelds.push(userNameFiled);
filelds.push(userNameEnFiled);
filelds.push(userPassPortFiled);
filelds.push(outControyFiled);
filelds.push(newOutControyFiled);
return filelds;
}
});
2 研究Panel以圖片為背景,然后上面寫字的實現(xiàn)IE是否支持
button以圖片做背景目前兼容性不好，可以見 2018-7-30 第一項的研究驻谆。
下面主要使用了component卵凑、container、panel以圖片做背景的情況胜臊。示例代碼
Ext.define('Learn.home.LearnPanelBackground',{
extend:'Ext.panel.Panel',
title:'以image做背景測試顯示字體',
width:700,
height:800,
layout:'hbox',
// margin:'20 0 0 20',
initComponent:function(){
this.callParent();
this.addPanel();
},
addPanel:function(){
var me = this;
var buttonComponent={
xtype:'component',
width:100,
height:40,
margin:'10 0 0 10',
padding:'0 0 0 0',
style:'background:url(image/buttonground-blue.png);font-size:16px;color:white;cursor:pointer;line-height:40px;text-align:center',
html:'component'
};
var buttonContainer={
xtype:'container',
width:100,
height:40,
margin:'10 0 0 10',
padding:'0 0 0 0',
style:'background:url(image/buttonground-blue.png);font-size:16px;color:white;cursor:pointer;line-height:40px;text-align:center',
html:'container'
}
var buttonPanel={
xtype:'panel',
width:100,
height:40,
margin:'10 0 0 10',
padding:'0 0 0 0',
border:false,//panel如果設(shè)置border false的話有有陰影效果
bodyStyle:{
background:'url(image/buttonground-blue.png)',
fontSize:'16px',
color:'white'
},
style:'cursor:pointer;line-height:40px;text-align:center',
html:'panel'
}
var buttonPanelBorder={
xtype:'panel',
width:100,
height:40,
margin:'10 0 0 10',
padding:'0 0 0 0',
bodyStyle:{
background:'url(image/buttonground-blue.png)',
fontSize:'16px',
color:'white'
},
style:'cursor:pointer;line-height:40px;text-align:center',
html:'panel'
}
me.add(buttonComponent);
me.add(buttonContainer);
me.add(buttonPanel);
me.add(buttonPanelBorder);
}
});
QQ截圖20180731172626.png
后續(xù)鏈接 2018-08-01
