Ext.onReady(function(){

viewport = new Ext.Viewport({
	layout:'border'
	, items:[
		{	region: 'north'
			, id: 'top'
			, height :50
		}
		, { region: 'west'
			, id:'acco'
			, layout: 'accordion'
			, animate: true
			, split: true
			, width: 200
			, minSize: 100
			, collapsible: true
			, collapseMode: 'mini'
			,items:[
				howtoTree
			]
		}
		, { region: 'center'
			, id: 'portal'
			, split: true
			, autoScroll: true
			, tbar: tb = new Ext.Toolbar()
		}
	]
});

howtoTree.getNodeById('howtoRootNode').expand();


//トップの設定
viewport.findById('top').body.dom.innerHTML = ''
+'<div id = "header">'
+'	<div id="top">'
+'		<a href="./index.php"><img src="./img/title.gif"></a>'
+'	</div>'
+'</div>';

var howtoTextPanel = new Ext.Panel({
	renderTo: viewport.findById('portal').body.id
	, autoLoad: './text/howtotext.txt'
	, border: false
});

howtoTextPanel.on('show', function(){
	alert('finish');
});

tb.add({
	text:' '
});

howtoTextPanel.getUpdater().on('update',function(){
	menuli = Ext.select('.menu li', true);
	for(i = 0; i < menuli.getCount(); i++ ){
		menuli.elements[i].on('click',function(){
			var el = Ext.select('#' + this.dom.className, true);
			var top = el.elements[0].dom.offsetTop;
			viewport.findById('portal').body.scrollTo('top', top, {duration:.75});
		});
	}
});





});