929web终端界面bug调试

928web终端界面

背景颜色

看到panel是有颜色的，使用了渐变色。

.x-panel-body-default {
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#99b9ff);
    background: -ms-linear-gradient(top,#ffffff,#99b9ff);
    background: -moz-linear-gradient(top,#ffffff,#99b9ff);
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#3399ff));
    /* border-color:#157fcc; */
    color: black;
    font-size: 13px;
    font-size: normal;
    border-width: 1px;
    border-style: solid;
}

手动布局

me.SettingPanel.doLayout();有啥作用？

var tree = Ext.create('Ext.tree.Panel',{
			title:'网络和位置设置',
			renderTo:'SettingPasswordID',
			width:300,
			//id : 'ShineTreePanel',
			height:500,	
			store: store,
			rootVisible: false,
			listeners: {
				itemclick:function(tree, record, item, index, e, eOpts){
					var title = record['data']['text'];
					//me.initShineComp();
					me.SettingPanel.removeAll();
					if(title=='网络状态'){

						me.SettingPanel.add(me.formStatus);

					}else if (title=='服务器设置'){
						me.addShineServerFormPanel();
						me.SettingPanel.add(me.formServer);

					}else if (title=='有线设置'){
						me.addShineOnlineFormPanel();
						me.SettingPanel.add(me.formOnline);

					}else if (title=='无线设置'){
						me.addShineOutlineFormPanel();
						me.SettingPanel.add(me.formOutline);
					}
					me.SettingPanel.doLayout();
				}
			}
		});	
		me.SettingPanel = Ext.create('Ext.panel.Panel',{
			width:700,
			height:500,
			border:0,
			renderTo:'spanId',
			items:[me.formServer]
		});

页面bug

出现的原因是，panel作为一个容器，在每次点击切换的时候，并没有采取card进行布局，而是利用了removeAll，add的方式来切换。这样做，看起来没有啥大问题。但是如果add的items，有延时事件，在延时的过程中，点切换，直接就因为removeAll，将所有的items移处了，延时时间执行的时候，就再也找不到相关的dom节点了，然后就报错了。针对此bug的代码对比如下：

有bug的代码：

listeners: {
	itemclick:function(tree, record, item, index, e, eOpts){
		var title = record['data']['text'];
		var panel=me.SettingPanel;
		panel.removeAll();//暴力移除，再重间
		if (title=='服务器设置'){
			me.addShineServerFormPanel();//再这个里面会再次重建
			panel.add(me.formServer);  //然后这个是重建后的item
		}
		panel.doLayout();
	}
}

修改后的代码：

listeners: {
	itemclick:function(tree, record, item, index, e, eOpts){
		var title = record['data']['text'];
		var panel=me.SettingPanel;
		var layout = panel.getLayout();
		if (title=='服务器设置'){
			me.addShineServerFormPanel(); //这个里面加上判断，如果有了，就不要再重建呢。
			layout.setActiveItem(1);
		}
		panel.doLayout();
	}
}

//例外，修改布局
me.SettingPanel = Ext.create('Ext.panel.Panel',{
	width:700,
	height:500,
	border:0,
	renderTo:'spanId',
	layout:'card',//修改成card布局
	activeItem:1,//默认显示第二个
	items:[me.formStatus,me.formServer,me.formOnline,me.formOutline]
});