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"
}
]
}
]
