ext 단일 페이지 프레임 구조

더 읽 기
최근 개발 프로젝트 는 ext 를 사용 하여 iframe 을 사용 하고 싶 지 않 습 니 다.많은 글 을 참고 한 후에 eval 방식 으로 js 코드 를 모듈 화하 여 프레임 페이지 홈 페이지 의 js 코드 main.js 를 실현 합 니 다.

//       
//                      
var myMask_info = "     ,   ...";
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:myMask_info});
//             function 
var moduleArray = {};
Ext.onReady( function() {
	Ext.QuickTips.init();
	//      loadmask 
	myMask.show();
	//           ajax    dwr(    json  )             DWRTreeLoader
	var dwrloader = new Ext.ux.DWRTreeLoader({
        dwrCall:AsyncMainSev.getUserFuncTreeJSON
      });
	
	//          Tab  
	var contentPanel = new Ext.TabPanel({  
		region:'center',  
		enableTabScroll:true,  
		activeTab:0,  
		items:[{  
			id:'homePage',  
			title:'  ',  
			autoScroll:true,
			closable:true,  
			html:''  &#13;
		}]  &#13;
	}); &#13;
	&#13;
	var _tree = new Ext.tree.TreePanel({&#13;
        id:'forum-tree',&#13;
        region:'west',&#13;
        title:'    ',&#13;
        split:true,&#13;
        width: 325,&#13;
        minSize: 175,&#13;
        maxSize: 400,&#13;
        collapsible: true,&#13;
        margins:'0 0 5 5',&#13;
        rootVisible:false,&#13;
        lines:false,&#13;
//   	selModel: new Ext.tree.MultiSelectionModel(),&#13;
        autoScroll:true,&#13;
        loader: dwrloader,&#13;
        root: new Ext.tree.AsyncTreeNode({text:'root',hasChildren:true,id: '0'})&#13;
        /*listeners: {&#13;
	        'checkchange': function(node, checked){&#13;
	            if(checked){&#13;
	                node.getUI().addClass('complete');&#13;
	            }else{&#13;
	                node.getUI().removeClass('complete');&#13;
	            }&#13;
	        }&#13;
    	}*/&#13;
    });&#13;
    //            loadmask&#13;
	_tree.addListener("load",function(){myMask.hide();});&#13;
	/**               **/&#13;
	var tree = Ext.getCmp('forum-tree');&#13;
	/*&#13;
	var sm = tree.getSelectionModel();&#13;
	sm.on('selectionchange', function(sm, node){&#13;
		//console.log(node.attributes.attributes.url);&#13;
		//   iframe        &#13;
		var n = contentPanel.getComponent(node.id);  &#13;
        if (!n) { ////             &#13;
            n = contentPanel.add({  &#13;
                'id':node.id,  &#13;
                'title':node.text,  &#13;
                closable:true,  &#13;
                autoLoad:{url:node.attributes.attributes.url, scripts:true} //  autoLoad       ,       ,    scripts    &#13;
            });  &#13;
        }  &#13;
        contentPanel.setActiveTab(n); &#13;
&#13;
		var n = contentPanel.getComponent(node.id);&#13;
		if(!n){&#13;
			n = contentPanel.add({ &#13;
				id:node.id,  &#13;
				title:node.text,  &#13;
				autoScroll:true,&#13;
				closable:true,  &#13;
				html:'<iframe id="frame_main" src="' + node.attributes.attributes.url + '" width="100%" height="400" frameborder="0" scrolling="auto"/>'&#13;
			});&#13;
		}&#13;
		contentPanel.setActiveTab(n);&#13;
    });&#13;
	*/&#13;
	&#13;
	// 10-03-02      tree.on         selectionmodel  &#13;
	/*&#13;
	tree.on('click', function(node){&#13;
        //        &#13;
		if ( node.isLeaf() ){&#13;
			//       Ext.tree.TreeNode&#13;
			var n = contentPanel.getComponent(node.id);&#13;
			//        TabPanel     tab   iframe  &#13;
			if(!n){&#13;
				n = contentPanel.add({ &#13;
					id:node.id,  &#13;
					title:node.text,  &#13;
					autoScroll:true,&#13;
					closable:true,  &#13;
					html:'<iframe id="frame_main" src="' &#13;&#10;&#9;&#9;&#9;&#9;&#9;&#9;+ node.attributes.attributes.url &#13;&#10;&#9;&#9;&#9;&#9;&#9;&#9;+ '" width="100%" height="400" frameborder="0" scrolling="auto"/>'&#13;
				});&#13;
			}&#13;
			//   &#13;
			contentPanel.setActiveTab(n);&#13;
		}&#13;
	});&#13;
	*/&#13;
	// 10-03-15                    js        &#13;
	tree.on('click', function(node){&#13;
		myMask.show();&#13;
		var nodeattr = node.attributes.attributes;&#13;
        //        &#13;
		if ( node.isLeaf() ){&#13;
			//        id&#13;
			var moduleId = nodeattr.module_name;&#13;
			var n = contentPanel.getComponent(moduleId);&#13;
			//        TabPanel     tab id    id&#13;
			if(!n){&#13;
				//           module&#13;
				if( moduleArray[moduleId] != undefined ){&#13;
					var module = moduleArray[moduleId];&#13;
					var moduleInstance = new module();&#13;
					var outCmp =  contentPanel.add(moduleInstance);&#13;
					contentPanel.setActiveTab(outCmp);&#13;
					myMask.hide();&#13;
				}else{&#13;
					//  ajax    eval  module            tabpanel &#13;
					Ext.Ajax.request({&#13;
						method: 'GET',&#13;
						url: nodeattr.js_source,&#13;
						success: function(response){&#13;
							var module = eval(response.responseText);&#13;
							moduleArray[moduleId] = module;&#13;
							var moduleInstance = new module();&#13;
							var outCmp =  contentPanel.add(moduleInstance);&#13;
							contentPanel.setActiveTab(outCmp);&#13;
							myMask.hide();&#13;
						}&#13;
					});&#13;
				}&#13;
			}&#13;
			//   js       &#13;
		}&#13;
	});&#13;
	&#13;
	//                  tree TabPanel  &#13;
	var viewport = new Ext.Viewport( {&#13;
		layout : 'border',&#13;
		items : [ {&#13;
				xtype: 'box',&#13;
				region: 'north',&#13;
				height: 30&#13;
			},&#13;
			_tree, &#13;
			contentPanel&#13;
			]&#13;
	});&#13;
});</code></pre>  <br>ajax 가 요청 한 js 코드 의 경 로 는 노드 node 의 속성 에 적 혀 있 습 니 다.트 리 노드 를 초기 화 할 때 동적 으로 적 혀 있 습 니 다.<br>하위 모듈 의 예제 사용자 관리<br>useradmin.js <pre><code name="code">//       &#13;
Ext.extend(Ext.Panel, {&#13;
	constructor: function(config) {&#13;
		//     &#13;
		var cm = new Ext.grid.ColumnModel([&#13;
		   {&#13;
	        id: 'username',&#13;
	        header: "  ",&#13;
	        dataIndex: 'username',&#13;
	        width: 100&#13;
	        &#13;
	     },{&#13;
	    	id: 'email',&#13;
	        header: "    ",&#13;
	        dataIndex: 'email',&#13;
	        width: 100&#13;
	     },{&#13;
	    	id: 'createdate',&#13;
	        header: "    ",&#13;
	        dataIndex: 'createdate',&#13;
	        width: 100&#13;
	     },{&#13;
	        id: 'updatedate',&#13;
	        header: "    ",&#13;
	        dataIndex: 'updatedate',&#13;
	        width: 100&#13;
	     }]);&#13;
		//console.log(basePath+'campaign/id/review');&#13;
		//       &#13;
		var user_store = new Ext.data.Store({&#13;
			url: basePath+'users/ajaxserv',&#13;
			&#13;
			reader: new Ext.data.JsonReader({&#13;
	            root: 'users',&#13;
	            totalProperty: 'totalCount',&#13;
	            id: 'id'&#13;
	        }, [&#13;
	            'username', 'email', 'createdate', 'updatedate'&#13;
	        ])&#13;
		});&#13;
	&#13;
		cm.defaultSortable = true;&#13;
		&#13;
		user_store.load();&#13;
		config = Ext.apply({&#13;
			id: 'm_useradmin',&#13;
			title: '    ',&#13;
			autoScroll: true,&#13;
			closable:true ,	&#13;
		    items:[&#13;
		        new Ext.grid.GridPanel({&#13;
		            store: user_store,&#13;
		            cm: cm,&#13;
		            stripeRows: true,&#13;
		            height: 350,&#13;
		            //width: 800,&#13;
		            autoWidth : true,   &#13;
		            loadMask: {msg:'      ,   '},&#13;
		            title: '    '  ,&#13;
		            tbar: [{ text: '  ', iconCls: 'new-item', tooltip: { title:'    ', text:'             '} }],&#13;
		            bbar: new Ext.PagingToolbar({&#13;
		                pageSize: 25,&#13;
		                store: user_store,&#13;
		                displayInfo: true,&#13;
		                displayMsg: '     {0} - {1} of {2}',&#13;
		                emptyMsg: "      "&#13;
		            })&#13;
		        })&#13;
		    ]&#13;
	    }, config);&#13;
		module.superclass.constructor.call(this, config);&#13;
	}&#13;
});&#13;
</code></pre>    <br>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Ext.form.ComboBox 편집 페이지 표시 값 문제

최근 EXTJS 3.0 개발 프로젝트, 페이지 폼에 ComboBox가 사용되었습니다. 어떻게 편집 페이지에 들어갈 때 백그라운드에서 전해지는 값을 표시할 수 있습니까?세 가지 방법이 모두 통과되었는데, 이를 요약하면...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ext 단일 페이지 프레임 구조

좋은 웹페이지 즐겨찾기