Vaadin 7 和 extjs mvc 集成示例

来源：互联网发布：mac os x 系统下载编辑：程序博客网时间：2024/05/24 04:25

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', //默认appcontrollers : ['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'    }]});

查看效果

0 0