Vaadin 7 和 extjs mvc 集成示例

vaadin 是一个和js 很友好的富客户端前端，。可以很简单的和很多js jq插件集成成为addon， vaadin 和js集成基础

https://vaadin.com/docs/-/part/framework/gwt/gwt-javascript.html

vaadin和 extjs mvc集成示例，项目结构如下

先定义一个 javascript component 使用vaadin提供的注解方式把 js 和css 发布出来

package com.lee.gantt;
import com.vaadin.annotations.JavaScript;
import com.vaadin.annotations.StyleSheet;
import com.vaadin.ui.AbstractJavaScriptComponent;
@JavaScript({"ext-all.js","app.js"})
@StyleSheet({"ext-all.css"})
public class ExtjsJavaScriptComponet extends AbstractJavaScriptComponent{
	private static final long serialVersionUID = 1L;
	public ExtjsJavaScriptComponet() {
	}
}

app.js 注意js对象名称要和包名类名一致

window.com_lee_gantt_ExtjsJavaScriptComponet = function() {

	Ext.onReady(function() {
		Ext.QuickTips.init();

		Ext.Loader.setConfig({
			enabled : true
		});

		Ext.application({
			name : 'MyApp',
			appFolder :'VAADIN/js/app', //默认app
			controllers : ['Main'],
			autoCreateViewport: true,
			launch : function() {
				/*Ext.create('Ext.container.Viewport', { // 简单创建一个试图
					layout : 'auto',// 自动填充布局
					items : {
						xtype : 'userlist',
						title : '用户列表',
						html : 'List of users will go here'
					}
				});*/
			}
		});
	});

}

viewport.js 定义了一个 viewport组件是渲染到body的

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires:[
        'Ext.tab.Panel',
        'Ext.layout.container.Border'
    ],
    layout: 'border',
    items: [
    	{
	        region: 'north',
	        xtype:'myheader',
	        height: 70
	    },
	   	{
	        region: 'west',
	        xtype: 'panel',
	        title:'主菜单',
	        width: 200,
	        minWidth: 100,
	        height: 200,
	        split: true,
	        //frame:true,
	        stateful: true,
	        stateId: 'mainnav.west',
	        collapsible: true,
	        layout:'fit',
	        tools: [{
	            type: 'gear',
	            regionTool: true
	        }],
	        items:[{
	        	xtype: 'panel',
	        	layout:'accordion',
	        	ui:'footer',
	        	items:[{
	        		xtype: 'panel',
	        		title: '系统管理',
	        		layout:'vbox',
					items:[{
						xtype:'button',
						width:'100%',
						textAlign :'left',
						iconCls:'table_add',
						padding:3,
						text:'部门管理'
					},{
						xtype:'button',
						width:'100%',
						textAlign :'left',
						iconCls:'table_add',
						text:'员工管理'
					},{
						xtype:'button',
						width:'100%',
						textAlign :'left',
						iconCls:'table_add',
						text:'角色管理'
					}]                	
	        	},{
	        		xtype: 'panel',
	        		title: 'Accordion Item 2',
                	html: '<empty panel>',
                	cls:'empty'
	        	},{
	        		xtype: 'panel',
	        		title: 'Accordion Item 2',
                	html: '<empty panel>',
                	cls:'empty'
	        	}]
	        }]
    	}, 
    	{
	        region: 'center',
	        xtype: 'userlist'
	    }
	]
});

查看效果

Vaadin 7 和 extjs mvc 集成示例

猜你喜欢