Ext JS 4.2

 

js/data.js
  hdjg url:'jsp/hdjg/hdjg.jsp',

jsp/hdjg/hdjg.jsp
  // hdjg.js 是 hdjg.jsp 页面信息，以 ext 的界面显示
  <script  type="text/javascript" src="extjs/hdjg.js"></script>
  // 需要的 js 插件，比如：actiontextcolumn.js
  <script  type="text/javascript" src="js/actiontextcolumn.js"></script>

extjs/hdjg.js 代码如下：
/** 
 * 创建了一个名为 MyApp 的全局变量
 * 所有的应用程序类(如 Models, Views, Stores， Controllers)都被认为在一个单独的命名空间下
 * 大幅度降低了全局变量名冲突的机会
 * MyApp 有一个全局的方法来获得对当前应用的引用 var app = MyApp.getApplication();
 * 当所有的页面内容准备好并且所有的 javascript 被加载后，你的应用程序中的 launch 函数被调用，此刻启动您的应用程序并运行代码
 * 通常这些代码就想包含创建一个 Viewport
*/
// Ext.Loader 加载机制
Ext.Loader.setConfig({
    // 通过调用 Loader.setConfig 可开启 Ext.Loader
    // 需要传递一个匿名对象，它的 eanbled 属性设置为 true，而命名空间设置为路径映射。
    enabled: true// 开启异步加载模式 
});
// 如下，在 Ext.application 下配置 paths 也是可以的
Ext.Loader.setPath( {
        'Ext.ux': 'ext-4/ux',
        'Ext': 'ext-4'
    });
Ext.application({
    name: 'MyApp',// 创建了一个名为 MyApp 的全局变量
    appFolder: 'app',// Ext.application 的根目录文件夹 WebContent/app，所有 View、Store、Ctrl 都在 app 文件夹下
    // requires 是 extjs4 新增的机制，主要是实现异步加载
    // 实现根据我们的需要动态加在所需要的组件文件
    // 在不点击对应的按钮或者选项的时候就不会加载对应的 js 文件，提高了加载速度和用户等待时间
    requires: [
        'MyApp.view.hdjg.hdjgViewPort',
        'Ext.ux.TabReorderer',
        'Ext.ux.TabCloseMenu'
    ],
    paths: {
        'Ext.ux': 'ext-4/ux',
        'Ext':'ext-4'
    },    
    // Ext.application 代表了一个完整的 app
    // hdjgCtrl 表明这个 Ctrl，在整个 app 里面可操作
    // 我们并没有在应用程序中直接列举视图。这是因为视图由控制器管理，这很明显的保持了这些依赖
    controllers:[
       'hdjg.hdjgCtrl'
    ],
    launch: function() {
        Ext.QuickTips.init();
        var cmp = Ext.create('MyApp.view.hdjg.hdjgViewPort', {
            // 所有的 js 被加载后，调用 launch 函数，创建 hdjgViewPort
        });
        cmp.show();
        
        // 想创建 Viewport，也可以这么写
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            autoScroll : false,
            items: {
                xtype: 'hdjgViewPort'// alias : 'widget.hdjgViewPort',
            }
        });
        
    }
});

// MyApp.view.hdjg.hdjgViewPort,路径是 WebContent/app/view/hdjg/hdjgViewPort
Ext.define('MyApp.view.hdjg.hdjgViewPort', {
    extend : 'Ext.Viewport',
    alias : 'widget.hdjgViewPort',
    id : 'hdjgViewPort',
    layout : 'border',
    // ... 其他相关配置
    // items 来对 Viewport 进行布局设计
    items: [{
        region : 'west',// 布局位置
        xtype : 'container',// xtype
        id : 'west',// 唯一 id
        title : "企业信息",
        flex : 1,
        margins : '0 0 0 0',
        autoScroll : false,
        layout : 'accordion',
        collapsible : true,
        layoutConfig : {
            animate : true
        },
        split : true
    }, {
        // ...
    }, {
        region : 'center',// 布局位置
        xtype : 'tabpanel',// xtype
        flex : 6,
        id : 'hdjgTab',// id 便于 Ext.getCmp('#id') 获取组件
        activeTab : 'tab_101',// 默认激活的选项卡
        enableTabScroll : true,
        layout : 'fit',
        border : false,
        split : true
    }],
    
    // 添加监听 listeners，加载布局 west 位置的 treePanel
    listeners: {
        "beforerender" : function() {
            // 请求左侧树数据
            // Ext.getBody().mask('正在加载功能菜单....');
            Ext.Ajax.request({
                url : "data/hdjgTree.json",// 获得 json
                success : function(response, opts) {
                    var westPanel = Ext.getCmp('west');// west 位置
                    var data = Ext.JSON.decode(response.responseText);
                    var nodes = data;
                    // westPanel 循环加载treePanel
                    for ( var index in data) {
                        var node = data[index];
                        var store = Ext.create('Ext.data.TreeStore', {});
                        store.setRootNode(node);
                        var treePanel = Ext.create('Ext.tree.Panel', {
                            id : 'treePanel_' + node.id,// 加载树形结构
                            title : node.text,
                            icon : node.icon,
                            useArrows : true,
                            rootVisible : false,
                            animate : true,
                            collapsible : true,
                            store : store,
                            listeners : {
                                itemclick : hdjgCtrl.addTab// 点击 treePanel，触发 addTab（创建选项卡事件）
                            }
                        });
                        westPanel.add(treePanel);
                    }
                }
            });// ajax end
            
            // 加载完成 treePanel，即默认展示 qshView 视图
            var application = hdjgCtrl.getApplication();
            Ext.require('MyApp.controller.hdjg.qshCtrl', function() {  
                Ext.create('MyApp.controller.hdjg.qshCtrl').init();// 初始化
                var tabPanel = Ext.getCmp('hdjgTab');// qshView 将要放置的位置
                var tab = tabPanel.add({
                    id : 'tab_101',// 'tab_' + record.raw.id;默认首先显示的tab
                    items : [{
                        xtype : 'qshView'// alias: 'widget.qshView',
                    }],
                    title : '<b>' + '清三河' + '</b>',
                    icon : 'resources/icons/data.png',
                    layout : 'fit',
                    closable : false,// false：不能关闭，true则相反。
                    activate : true
                });
                tab.tab.show();
                tabPanel.setActiveTab(tab);
            }, application);
        }// beforerender end
    }// listeners end
}

Controller> hdjgCtrl
Ext.define('MyApp.controller.hdjg.hdjgCtrl',{
    extend: 'Ext.app.Controller',
    init : function() {
        hdjgCtrl = this;
    },
    addTab :function(view, record, item, index, e){
        var view = record.raw.view;
        if(view == undefined || view == ''){
            return;
        }
        if(view == 'hzxtView'){
            window.open('http://10.19.51.241:8080/shjTest/admin/log.html',"_blank");
        }else{
            var name = view.slice(0,view.lastIndexOf('View'));
            hdjgCtrl.addTabs(name,record,item,index,e);
        }
    },
    addTabs : function(viewName, record, item, index, e) {
        var view = viewName + 'View';
        var ctrlName = 'MyApp.controller.hdjg.' + viewName + 'Ctrl';
        var application = hdjgCtrl.getApplication();
        if (Ext.ClassManager.isCreated(ctrlName)) {
            // wryCtrl.createTab(view, record, item, index, e);
            hdjgCtrl.createTab(view, record, item, index, e);
        } else {
            Ext.require(ctrlName, function() {
                Ext.create(ctrlName).init();
                hdjgCtrl.createTab(view, record, item, index, e);
            }, application);
        }
    },
    createTab:function(view, record, item, index, e){
        var tabs = 'tab_' + record.raw.id;
        if (!Ext.isEmpty(record.raw.leaf)) {//判断是否为是叶子节点
            var tabPanel = Ext.getCmp('hdjgTab');
            var vali_curr = tabPanel.getComponent(tabs);
            if (!vali_curr) {
                var tab = tabPanel.add({
                    id : tabs,
                    layout:'fit',
                    title:'<b>'+ record.raw.text+ '</b>',
                    items:[{
                        xtype:record.raw.view
                    }],
                    icon:record.raw.icon,
                    closable : true,
                    activate : true
                });
                tab.tab.show();
                tabPanel.setActiveTab(tab);
            } else {
                vali_curr.tab.show();
                tabPanel.setActiveTab(vali_curr);
            }
        }
    },
});

View> qshView
Ext.define('MyApp.view.hdjg.qshView', {
    extend : 'Ext.grid.Panel',
    alias : 'widget.qshView',
    id : 'qshView',
    layout : 'fit',
    simpleSelect : false,
    autoHeight : true,
    autoScroll : true,
    store : 'hdjg.qshStore',
    columns : [ {
        xtype : 'rownumberer',
        text : '序号',
        width : 80,
        align : 'center'
    }, {
        text : 'objectid',
        dataIndex : 'objectid',
        hidden : true
    }, {
        text : '河道名称',
        dataIndex : 'hdmc',
        renderer : function(value, metaData) {
            metaData.tdAttr = 'data-qtip="' + value + '"';
            return value;
        }
    }/* more..*/],
    features : [ {
        ftype : 'grouping',// ftype: 'grouping' 分组
        id : 'groupingId',// Ext.getCmp('#id').view.getFeature('grouping')
        sortAscText : "升序",
        sortDescText : "降序",
        columnsText : "表格字段",
        showGroupsText : "表格分组",
        enableGroupingMenu : false,
        groupHeaderTpl : '{name}'// 其中{name}即为store中<分组列>所对应的值
    } ],
    // 停靠组件> 搜索条件
    dockedItems : [ {
        dock : 'top',
        xtype : 'toolbar',
        id : 'toolbar',
        autoShow : true,
        enableOverflow : true,
        layout : {
            overflowHandler : 'Menu'// items溢出处理
        },
        items : [ {
            xtype : 'combobox',
            name : 'xsq',
            fieldLabel : '县市区',
            labelAlign : 'right',
            labelWidth : 45,
            width : 200,
            editable : false,
            emptyText : '<县市区>',
            store : [ '全部','海曙区', '镇海区', '高新区',
                    '慈溪市', '余姚市', '宁海县', '象山县',
                    '鄞州区', '北仑区', '江东区', '奉化区',
                    '江北区', '杭州湾新区', '东钱湖旅游度假区', ]
        }, {
            xtype : 'combobox',
            name : 'hdwtzylx',// 河道问题主要类型
            labelAlign : 'right',
            labelWidth : 40,
            width : 200,
            fieldLabel : '类别',
            editable : false,
            emptyText:'<河道问题主要类型>',
            store : [ '全部', '黑臭河、垃圾河',
                    '垃圾河、黑、臭河', '垃圾河', '臭河',
                    '部分黑臭', '黑臭河', '垃圾河、黑臭河',
                    '黑河、臭河', '垃圾河、臭河', '黑河',
                    '垃圾河、黑河', '垃圾河、黑河、臭河', '黑臭' ]
            }, {
            icon : 'resources/icons/zoom.png',
            xtype : 'button',
            margin : '0,0,0,20',
            text : '搜索',
            handler : function() {
                qshCtrl.search();
            }
        },'->', {
            xtype : 'button',
            text : '导出excel',
            icon : 'resources/icons/page_white_excel.png',
            handler : function() {
                // grid 导出为 excel
                Ext.MessageBox.confirm("提示", "确定要导出Excel文件？", function(choice){
                    if(choice == 'yes'){
                        qshCtrl.exportExcel();
                    }
                });
            }
        } ]
    }, {
        dock : 'top',
        xtype : 'toolbar',
        layout: {
            overflowHandler: 'Menu'//items 太多溢出处理
        },
        items : [{
            xtype : 'button',
            text : '全部展开',
            icon : "resources/icons/book_open.png",
            handler : function() {
                Ext.getCmp('qshView').view.getFeature('groupingId').expandAll();
            }
        }, {
            xtype : 'button',
            text : '全部收缩',
            icon : "resources/icons/book.png",
            handler : function() {
                Ext.getCmp('qshView').view.getFeature('groupingId').collapseAll();
            }
        }]
    }, {
        dock : 'bottom',
        xtype : 'pagingtoolbar',
        plugins : [ new Ext.ui.plugins.ComboPageSize({
            addToItem : true,
            prefixText : '每页',
            postfixText : '条'
        }) ],
        store : 'hdjg.qshStore',
        displayInfo : true,
        displayMsg : '显示 {0} - {1} 条，共计 {2} 条',
        emptyMsg : '没有数据'
    } ]
});

// View 中注意有无 initComponent 的区别
// 没有 initComponent 属性
columns: [{
    // ...
}],
dockedItems: [{
    // ...
}]

// 有 initComponent 属性
initComponent : function(){
    this.columns = [{
        
    }];
    this.dockedItems = [{
        
    }];
    // 末尾再加上
    this.callParent(arguments);
}

关于 View 中的分组
columns: [{
    // ...
}],
// 分组
features : [ {
    ftype : 'grouping',// ftype: 'grouping' 分组
    id : 'grouping',// Ext.getCmp('#viewId').view.getFeature('grouping')
    sortAscText : "升序",
    sortDescText : "降序",
    columnsText : "表格字段",
    showGroupsText : "表格分组",
    enableGroupingMenu : false,
    groupHeaderTpl : '{name}'// 其中 {name} 为 store 中<分组列>所对应的值，在 view 上显示的值
} ],
dockedItems: [{
    // ...
}]

// 或者下面这种方式，然后再 grid 下面，features: [{groupingFeature}]
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
    id: 'grouping',
    ftype: 'grouping',
    groupHeaderTpl: 'Group: {name} ({rows.length})', // print the number of items in the group
    startCollapsed: true // start all groups collapsed
});
columns: [{
    features: [{groupingFeature}]
}],


Store> qshStore
// 有 Store，则必须有 Model，Model 的创建比较简单,这里不罗列了
Ext.define('MyApp.store.hdjg.qshStore', {
    extend : 'Ext.data.Store',
    model : 'MyApp.model.hdjg.qshModel',
    pageSize : 20,
    groupField : 'xsq', // 分组项，与 view 中 features 下 groupHeaderTpl 呼应
    listeners : {
        beforeload : function() {
            var view = Ext.getCmp('qshView');
            if (view) {
                // 获取 搜索条件
                xsq = view.down('combobox[name="xsq"]').getValue();
                hdwtzylx = view.down('combobox[name="hdwtzylx"]').getValue();
            }
            // 传递参数
            Ext.apply(this.proxy.extraParams, {
                'qsh.xsq' : xsq,
                'qsh.hdwtzylx' : hdwtzylx
            });
        }
    },
    // proxy 与后台交互
    proxy : {
        type : 'ajax',
        url : 'hdjgAction!getQshBasicInfo',
        reader : {
            type : 'json',
            root : 'qsh',// 返回的 json 的对象
            totalProperty : 'totalCount'
        }
    },
    autoLoad : true
});

Controller> qshCtrl
Ext.define('MyApp.controller.hdjg.qshCtrl', {
    extend : 'Ext.app.Controller',
    init : function() {
        qshCtrl = this;// 当前 controller 对象，赋值给 qshCtrl 变量 
        this.control({
            'qshView button[action=search]' : {
                click : this.search
            },
            'qshView button[action=exportExcel]' : {
                click : this.exportExcel
            }
        });
    },
    // extjs4 建议 MVC 模式中 controller 引用组件的一种方式
    // selector中设置组件，可以用 id、classname，但推荐用 ComponentQuery（'组件检索'功能，这个也是4.0的新特性）来定位组件
    // ref 中设置引用名，引用之后会按照引用名 alias，自动为该组件设置一个 getter 方法
    // qshCtrl.getQshView();
    refs : [ {
        ref : 'qshView',
        selector : 'qshView'
    } ],
    // views、stores、models 在 controller 引用，它们可以随意调用 qshCtrl
    views : [ 'hdjg.qshView' ],
    stores : [ 'hdjg.qshStore' ],
    models : [ 'hdjg.qshModel' ],
    
    // 搜索
    search : function() {
        this.getHdjgQshStoreStore().loadPage(1);
    },
    
    // 导出Excel
    exportExcel : function() {
        var mask = new Ext.LoadMask(Ext.getCmp('qshView'),{// *
            msg :'正在创建Excel...'
        });
        var view = Ext.getCmp('qshView');
        if (view) {
            var xsq = view.down('combobox[name="xsq"]').getValue();
            var hdwtzylx = view.down('combobox[name="hdwtzylx"]').getValue();
        }
        mask.show();
        Ext.Ajax.request({
            url:'hdjgAction!qshBasicInfoExcel',// *
            params:{
                // 表头
                titleArr : [ "河道名称", "乡镇街道", "河道编码", "所在位置", "河长（米）",
                            "起点", "终点", "河道问题主要类型", "初步治理对策", "治理时间",
                            "治理进度", "姓名", "职务", "电话" ],
                // 数据行             
                fieldArr : ["hdmc","xzjd","hdbm","szwz","cd","qd","zd","hdwtzylx","cbzldc","zlsj","zljd","zrhz","zw","dh"],
                excelName : '基础信息_清三河',// excelName.xls
                sheetName : '清三河',
                // 搜索条件            
                xsq : xsq,
                hdwtzylx : hdwtzylx
            },
            success:function(response){
                // IE
                if(navigator.appName.indexOf('Microsoft Internet Explorer') != -1){
                        window.location.href = "../../qsh/" + response.responseText;
                } else {
                    // Firefox
                    if(navigator.appName.indexOf('Netscape') != -1) {
                        // 是否支持 ActiveXObject 控件
                        if(!!window.ActiveXObject || "ActiveXObject" in window){
                            window.location.href = "../../qsh/" + response.responseText;
                        } else {
                            window.location.href = "qsh/" + response.responseText;
                        }
                    } else {
                        window.location.href = "qsh/" + response.responseText;
                    }
                }
                mask.hide();
            }, timeout: 1200000
        })
    }
});

附 hdjgTree.json
[
  {
    "id": 1, 
    "text": "基础信息", 
    "icon": "resources/icons/book_open.png", 
    "leaf": false, 
    "children": [
      {
        "id": 101, 
        "text": "清三河", 
        "icon": "resources/icons/grid.png", 
        "leaf": true, 
        "view": "qshView"
      }, 
      {
        "id": 102, 
        "text": "河长制", 
        "icon": "resources/icons/grid.png", 
        "leaf": true, 
        "view": "hzzView"
      }
    ]
  }, 
  {
    "id": 2, 
    "text": "水质信息", 
    "icon": "resources/icons/book.png", 
    "leaf": false, 
    "children": [
      {
        "id": 201, 
        "text": "河长制河道", 
        "view": "hzzhdView", 
        "leaf": true, 
        "icon": "resources/icons/grid.png"
      }, 
      {
        "id": 202, 
        "text": "三河河道", 
        "view": "shhdView", 
        "leaf": true, 
        "icon": "resources/icons/grid.png"
      }
    ]
  }
]