//
// This is the main layout definition.
//
var ua = navigator.userAgent.toLowerCase();
var isIE = ua.indexOf("msie") > -1;
//alert(isIE);
var start = {
id: 'start-panel',
title: '內容',
layout: 'fit',
bodyStyle: 'padding:0px',
contentEl: 'start-div', // pull existing content from the page
height: 600,
autoScroll: isIE
};
Ext.onReady(function(){
Ext.QuickTips.init();
// This is an inner body element within the Details panel created to provide a "slide in" effect
// on the panel body without affecting the body's box itself. This element is created on
// initial use and cached in this var for subsequent access.
var detailEl;
var contentEl;
// This is the main content center region that will contain each example layout panel.
// It will be implemented as a CardLayout since it will contain multiple panels with
// only one being visible at any given time.
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
autoScroll: true,
items: [
// from basic.js:
start/*, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table,
// from custom.js:
rowLayout, centerLayout,
// from combination.js:
absoluteForm, tabsNestedLayouts*/
]
};
// Go ahead and create the TreePanel now so that we can use it below
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title: '導覽列',
region:'north',
split: true,
height: 400,
minSize: 150,
autoScroll: true,
// tree-specific configs:
rootVisible: false,
lines: false,
singleExpand: false,
useArrows: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'tree-data.json'
}),
root: new Ext.tree.AsyncTreeNode()
});
var action_list = {
register: function(){
Ext.getDom('start-div').innerHTML = '';
},
puzzle: function(){
Ext.getDom('start-div').innerHTML = "";
},
level1: function(){
Ext.getDom('start-div').innerHTML = '';
},
level2: function(){
Ext.getDom('start-div').innerHTML = '';
},
level3: function(){
Ext.getDom('start-div').innerHTML = '';
},
level4: function(){
Ext.getDom('start-div').innerHTML = '';
},
level5: function(){
Ext.getDom('start-div').innerHTML = '';
},
img1: function(){
Ext.getDom('start-div').innerHTML = '';
},
img2: function(){
Ext.getDom('start-div').innerHTML = '';
},
img3: function(){
Ext.getDom('start-div').innerHTML = '';
},
img4: function(){
Ext.getDom('start-div').innerHTML = '';
},
img51: function(){
// 迎娶
Ext.getDom('start-div').innerHTML = ''
},
img52: function(){
// 典禮
Ext.getDom('start-div').innerHTML = '';
},
img53: function(){
// 晚宴
Ext.getDom('start-div').innerHTML = '';
},
img61: function(){
// 蜜月旅行9/30
Ext.getDom('start-div').innerHTML = '';
},
img62: function(){
// 蜜月旅行10/1
Ext.getDom('start-div').innerHTML = '';
},
img63: function(){
// 蜜月旅行10/2
Ext.getDom('start-div').innerHTML = '';
},
img64: function(){
// 蜜月旅行10/3
Ext.getDom('start-div').innerHTML = '';
},
img65: function(){
// 蜜月旅行10/4
Ext.getDom('start-div').innerHTML = '';
},
img8: function(){
// 歸寧
Ext.getDom('start-div').innerHTML = '';
},
img7: function(){
// 訂婚
Ext.getDom('start-div').innerHTML = '';
},
img81: function(){
Ext.getDom('start-div').innerHTML = "";
},
img82: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img83: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img84: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img85: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img86: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img87: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img88: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img89: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img8a: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img8b: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img8c: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img8d: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
img8e: function(){
//
Ext.getDom('start-div').innerHTML = "";
},
proc_page: function(){
window.open('/file/proc_page.doc');
},
news: function(){
Ext.getDom('start-div').innerHTML = "";
},
contact_msn: function(){
Ext.getDom('start-div').innerHTML = '';
},
contact_gtalk: function(){
Ext.getDom('start-div').innerHTML = '';
},
traffic: function(){
start.autoScroll = false;
Ext.getDom('start-div').innerHTML = "";
},
rss: function(){
window.open("/file/feed.rss");
},
board: function(){
if (isIE){
start.autoScroll = false;
contentPanel.autoScroll = false;
Ext.getDom('start-div').innerHTML = "";
}else{
start.autoScroll = true;
Ext.getDom('start-div').innerHTML = "";
}
}
};
// Assign the changeLayout function to be called on tree node click.
treePanel.on('click', function(n){
//alert(n);
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
//alert(n.id);
//if(n.leaf && n.id != sn.id){ // ignore clicks on folders and currently selected node
//Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
//if (!contentEl){
//var bd = Ext.getCmp('content-panel').body;
//bd.update('').setStyle('background','#fff');
//contentEl = bd.createChild(); //create default empty div
//}
var action = action_list[n.id];
if (typeof action == 'function'){
action();
}
//Ext.getDom('start-div').innerHTML = n.id;
//Ext.getDom('xyz').src = 'http://www.google.com';
//alert(x);
//contentEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
/*
if(!detailEl){
var bd = Ext.getCmp('details-panel').body;
bd.update('').setStyle('background','#fff');
detailEl = bd.createChild(); //create default empty div
}
detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
*/
//}
});
// 左下角
// ''
var detailsPanel = {
id: 'details-panel',
title: '',
region: 'center',
height: '100%',
bodyStyle: 'padding-bottom:15px;background:#eee;',
autoScroll: false,
html: '
'
};
// Finally, build the main layout once all the pieces are ready. This is also a good
// example of putting together a full-screen BorderLayout within a Viewport.
new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
},{
layout: 'border',
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 180,
minSize: 100,
maxSize: 500,
items: [treePanel, detailsPanel]
},
contentPanel
],
renderTo: Ext.getBody()
});
});