会议预约通用弹出窗设计
会议预约通用弹出窗设计
突发奇想，然后参照一个同事设计了这样一个通用的弹出提示框。这个跟系统自带的窗口，差别还是很大的。跟同事的设计的，又有区别。同事设计的，因为主要内容区域全部都是html写的，不太便于扩展，而且将按钮的事件绑定到了全局的函数中，不利于组件的封装性。所以，就用了半天时间，自己参照设计图，编写了这样一个相对通用的提示框。
过程中遇到的主要问题：
- 窗体内的子组件设计：
最开始的时候，使用label组件，结果发现这个组件的内容，只能在一行显示，如果超了之后，那么超出的，自动就隐藏了。后来才想到使用panel这样的组件。 - 主体内容的样式，设定。
难度主要在于，区分 style bodyStyle这两种样式的作用。反正，我也不知道，就两个都试试。另外，如果样式设定了，没有起作用，有两种可能，一种是上面的元素覆盖到下面的元素的样式，导致下面的样式显示不出来。另外一种可能，由于css的样式的优先级，可能被系统默认的，给覆盖了。这些都需要打开浏览器的控制台，去研究。另外，在定义元素的时候的style的样式，优先级很高，自己在sass里面定义的内容，干不过在js代码里面定义的style的样式，解决办法，只好移动到sass中，降低优先级。
另外，在这个过程中，发现一个好用的定义样式的方式。就是sass，先找大的范围，缩小范围后，然后在用定义。这样的好处是，不用改写到别人的样式。这里面有个好用的方法，起外号，cls样式（虽然现在没有用过，以后自定义样式肯定用得到）。
- 按钮的设计
直接套用了之前的按钮设计。灵活得使用了空的compenent来自定义属性。
- 另外一个，自己为自己设计的小麻烦。bind hidden的时候，结果总是写错了，写成了rightHandler，结果写隐藏，总是隐藏不到。
说明
如果只要一个按钮，随意隐藏一个按钮（之前并不是，只能优先隐藏右边的。现在左右两边都增加了一个配重块，如果隐藏一个按钮，另外一侧的component就显示出来了）。如果两个按钮，就不用隐藏。
/******************
* 2019年1月21日
* 会议预约通用弹出提示框
******************/
Ext.define('DesktopOrder.view.meetingorder.CommonMsgWin', {
extend: 'Ext.window.Window',
xtype:"commonmsgwin",
height: 500,
width:400,
padding:'0 30',
modal:true,
closable:false,
layout:'vbox',
resizable :false,
buttonAlign :'center',
vmData:null,
viewModel:{
data:{
icon:'<img src="./resources/meetingorder/images/meetingsubmit/reject.png" alt="">',
title:'确定取消会议？',
message:'取消非当天会议不扣分，取消当天会议您的评分会下降',
btnLeft:'取消',
btnRight:'确定',
hiddenLeft:false,
hiddenRight:false
}
},
style: {
borderRadius:'10px',
border:0
},
constructor:function(config){//后执行
var me = this;
me.superclass.constructor.call(me, config);
},
initComponent:function(){//先执行
var me = this;
me.applyCommonMsgWin();
me.callParent();
if(me.vmData){
me.getViewModel().setData(me.vmData);
}
},
applyCommonMsgWin:function(){
var me=this;
Ext.apply(me,{
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
height:100,
defaults: {
minWidth: 70,
scale: 'medium',
style: {
borderRadius:'20px',
border:'solid 1px #d6d6d4',
fontSize:'16px',
color:'#5c5757',
},
bodyStyle:{
color:'#5c5757'
}
},
style: {
backgroundColor:'transparent'
},
items: [{
xtype: 'component', flex: 1,
style:'border:0;',
bind:{
hidden:'{!hiddenRight}'
},
},{//左侧
xtype: 'button',
width:100,
height:40,
bind:{
hidden:'{hiddenLeft}',
text:'{btnLeft}'
},
handler: function () {
me.leftHandler();
}
},{
xtype: 'component', flex: 1,
style:'border:0;'
},{//右侧
xtype: 'button',
margin:'0 0 0 0',
width:100,
height:40,
bind:{
hidden:'{hiddenRight}',
text:'{btnRight}'
},
handler: function () {
me.rightHandler();
}
},{
xtype: 'component', flex: 1,
style:'border:0;',
bind:{
hidden:'{!hiddenLeft}'//这是后来加的，不必刻意隐藏右侧的按钮。
},
}]
}]
});
},
items:[{
bind:{
html:'{icon}',
},
width:'100%',
height:150,
bodyStyle: {
textAlign:'center',
}
},{
bind:{
html:'{title}',
},
width:'100%',
height:50,
bodyStyle: {
color:'#26BAEE',
fontSize:'28px',
textAlign:'center',
lineHeight:'50px'
}
},{
bind:{
html:'{message}',
},
width:'100%',
bodyStyle: {
color:'#6B6461',
fontSize:'22px',
textAlign:'center',
lineHeight:'42px'
}
}],
leftHandler:function(){
},
rightHandler:function(){
}
});
css样式
使用css样式，确实很舒服。能方便灵活的定义样式。
//注意使用 .x-window 进行了缩小范围操作。这个是很重要的思想。
.x-window{
//这个是因为color，只有写到这个级别才能起作用，写到style中，居然没有啥用。因为style中的通用样式，干不过下面这个。
.x-btn-inner-default-medium{
color: #5c5757;
}
//因为后面这个写在style中，一般的sass样式都干不过它，所以只要让它降级，写到sass文件中，才行。
a.x-btn{
background-color:#f2f2f2
}
//其实用:hover伪类选择器，也是可以的。
a.x-btn-over{
background-color:#ddd;
}
//这个后面这个，主要是因为.x-btn-pressed的类名干不过下面这个长的，所以才使用这么长的名字。
.x-btn.x-btn-menu-active.x-btn-default-medium, .x-btn.x-btn-pressed.x-btn-default-medium{
background-color:#CCCCCC;
}
}使用方法
使用两个按钮
var win=Ext.widget({
xtype:'commonmsgwin',
vmData:{
title:'确定返回？',
message:'返回后，数据将不会保存。'
},
leftHandler:function(){
win.destroy();
},
rightHandler:function(){
ShineMessageHub.fireEvent("meetingmainhomesetactiveitem",me.setItemIndex);
win.destroy();
}
}).show();使用一个按钮
var win=Ext.widget({
xtype:'commonmsgwin',
vmData:{
title:'操作提示',
message:'返回后，数据将不会保存。',
hiddenLeft:true//隐藏任意一个按钮即可。
},
rightHandler:function(){
win.destroy();
}
});
if(action.result.code==1){//一般错误提示
win.getViewModel().setData({message:msg});
win.show();
}
if(action.result.code==2){//时间冲突
win.getViewModel().setData({message:'时间已冲突，请重新选择。'});
win.show();
}使用两个按钮
var win=Ext.widget({
xtype:'commonmsgwin',
vmData:{
title:'确定返回？',
message:'返回后，数据将不会保存。'
},
leftHandler:function(){
win.destroy();
},
rightHandler:function(){
ShineMessageHub.fireEvent("meetingmainhomesetactiveitem",me.setItemIndex);
win.destroy();
}
}).show();//记得一定要show出来。在更改默认的rightHandler的值的时候，记得别当成了viewModel了。
使用下面的方式即可。
win.getViewModel().setData({message:'会议已创建成功。',icon:'pass'});
win.rightHandler=function(){
ShineMessageHub.fireEvent("meetingorderhomebackpreviouspage");
win.destroy();
};
win.show();