Ext.require(['*']);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
//菜单模型
var model = Ext.define("TreeModel", { // 定义树节点数据模型
extend : "Ext.data.Model",
fields : [
{name : "id", type : "string"},
{name : "text", type : "string"},
{name : "iconCls", type : "string"},
{name : "leaf", type : "boolean"},
{name : 'url', type : "string"}
]
});
//菜单数据源
var treeStore = new Ext.data.TreeStore({
model: model,
root: {
text: 'Root',
expanded: true,
children: [{
text: '机构管理',
id:1,
url:path+'/backend/sysUnit/main',
canDropOnFirst: true,
canDropOnSecond: true,
leaf: true
}, {
text: '用户管理',
id:2,
url:path+'/backend/sysUser/main',
canDropOnFirst: true,
canDropOnSecond: false,
leaf: true
}, {
text: '权限管理',
id:3,
url:path+'/backend/sysAuthority/main',
canDropOnFirst: false,
canDropOnSecond: true,
leaf: true
}, {
text: '应用系统管理',
id:4,
url:path+'/backend/sysApp/main',
canDropOnFirst: false,
canDropOnSecond: false,
leaf: true
}, {
text: '资源管理',
id:5,
url:path+'/backend/sysResource/main',
canDropOnFirst: false,
canDropOnSecond: false,
leaf: true
}]
}
});
//菜单树
var treePanel=Ext.create('Ext.tree.Panel', {
//title: 'treePanel',
store: treeStore,
rootVisible: false,
useArrows: true,
height:'100%',
border: false,
listeners : {
'itemclick' : function(view,record){
if(record.data.leaf){
//e.stopEvent();
//alert(record.data.id);
var id=record.data.id;
var tab = centerPanel.getComponent(id);
if (!tab) {
var n = centerPanel.add({
'id' : id,
'title' : record.data.text,
closable : true,
//width:Ext.get("formPanel").getWidth()+17,
//height:centerPanel.getHeight(),
// html:'<iframe frameborder="0" width="100%" height="100%" src="chartsStyle'+typeId+'!main.do?itemId='+id+'"></iframe>',
autoLoad : {
url : record.data.url,
scripts : true
} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
}).show();
}else{//若是存在
centerPanel.setActiveTab(tab);//Active
}
}else{
if(record.data.expanded){
view.collapse(record);
}else{
view.expand(record);
}
}
} ,
'itemdblclick' : function(view, record, item, index, e, eOpts){
if(record.data.leaf){
var id=record.data.id;
var tab = centerPanel.getComponent(id);
if (tab) {
centerPanel.remove(tab);
}
var n = centerPanel.add({
'id' : id,
'title' : record.data.text,
closable : true,
autoLoad : {
url : record.data.url,
scripts : true
} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
}).show();
}else{
if(record.data.expanded){
view.collapse(record);
}else{
view.expand(record);
}
}
}
}
});
//应用设置数据源
var appTreeStore = new Ext.data.TreeStore({
model: model,
root: {
text: 'Root',
expanded: true,
children: [{
text: '绑定设备',
id:'/backend/bindingDevices',
url:path+'/backend/bindingDevices/main',
canDropOnFirst: true,
canDropOnSecond: true,
leaf: true
}, {
text: '报告类别管理',
id:'docType',
url:path+'/backend/docType/main',
canDropOnFirst: true,
canDropOnSecond: false,
leaf: true
}, {
text: '文档管理',
id:'/docManager',
url:path+'/backend/docManager/main',
canDropOnFirst: true,
canDropOnSecond: false,
leaf: true
}]
}
});
//应用管理菜单树
var appTreePanel=Ext.create('Ext.tree.Panel', {
//title: 'treePanel',
store: appTreeStore,
rootVisible: false,
useArrows: true,
height:'100%',
border: false,
listeners : {
'itemclick' : function(view,record){
if(record.data.leaf){
var id=record.data.id;
var tab = centerPanel.getComponent(id);
if (!tab) {
var n = centerPanel.add({
'id' : id,
'title' : record.data.text,
closable : true,
autoLoad : {
url : record.data.url,
scripts : true
}
}).show();
}else{//若是存在
centerPanel.setActiveTab(tab);//Active
}
}else{
if(record.data.expanded){
view.collapse(record);
}else{
view.expand(record);
}
}
}
}
});
//顶部面板
var northPannel=Ext.create("Ext.panel.Panel", {
height : 80,
html :'<img style="padding-left:20px;padding-top:10px;"'+
'src="'+path+'/images/sub_logo.png"></img>',
region : 'north',
split : true,
bbar : [{
iconCls : 'icon-user',
text : sysLoginUser
},'-',{
text : Ext.Date.format(new Date(),'Y年m月d日')
},'->',{
text : '退出',
iconCls : 'icon-logout',
handler : function() {
window.location.href=path+"/logoutBackend.jsp";
}
}],
bodyStyle : 'background-image: url('+path+'/images/admin/admin-header-bg.png)'
});
//中间内容面板
var centerPanel=Ext.create('Ext.tab.Panel', {
id:"centerPanel",
name:"centerPanel",
region: 'center',
deferredRender: false,
activeTab : 0,
enableTabScroll : true,
animScroll : true,
border : true,
autoScroll : true,
region : 'center',
split : true,
items: []
});
//左边菜单面板
var westPannel=Ext.create("Ext.panel.Panel", {
id:"westPannel",
name:"westPannel",
region: 'west',
stateId: 'navigation-panel',
title: '功能菜单',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: true,
margins: '0 0 0 5',
layout: 'accordion',
items: [{
title: '权限管理',
iconCls: 'icon-mainmenu',
items:[
treePanel
]
},{
title: '应用设置',
iconCls: 'icon-operate',
items:[
appTreePanel
]
}]
});
//系统视图
var viewport = Ext.create('Ext.Viewport', {
id: 'viewport',
layout: 'border',
items: [
northPannel,
westPannel,
centerPanel
]
});
});
分享到：
相关推荐
ExtJS 4从创建之初，就以最全面现代化为目标，它采用了改进的架构和加入了许多新的特性，从而使你可以创建可靠的下一代网络应用程序。框架的每个部分几乎都已升级和优化，已充分利用当今的现代浏览器，同时兼容之前...
html: '<h1>Hello, easyjf open source</h1>' }); win.show(); }); ``` 4. **EXTJS类库结构**： - **底层API（core）**：这是EXTJS的基础，包含DOM操作、事件处理、查询器等功能，如`DomHelper.js`和`Element...
此外，还需要理解Excel文件的结构，例如XML格式的Open XML，这是在线编辑器读写Excel文件的基础。 总之，基于EXTJS的在线EXCEL编辑器是一种高效且便捷的数据处理工具，结合了EXTJS的组件化和Web技术的优势，为用户...
Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS exceptions available for use with this release for open source ...
这些库通常通过模拟表格HTML 来创建Excel 文件，然后利用浏览器的`data:` URL 和`window.open()` API 来触发下载。 ### extjs导出.txt 文件"extjs导出.txt"可能包含EXTJS 导出功能的代码示例或注意事项。文本文件...
项目中用到了extjs,为了方便自学整理了一些extjs的资料，大家互相学习啊。 --open source,free software
这可能需要对Excel的XML格式（例如，.xlsx文件的Open XML格式）有一定的理解。 3. 创建一个包含了所有数据和格式信息的Excel文件，这可以通过使用像SheetJS这样的库来完成，它可以将数据转换成Excel文件格式。 4. ...
后端服务通过JDBC（Java Database Connectivity）或者ODBC（Open Database Connectivity）驱动与Oracle通信。 6. **CRUD操作**："增加、删除、修改、查询"是数据库操作的基础。在EXTjs中，可以通过Store的load、...
Commercial and Open Source licenses available 更新说明 核心改进：检视框架的架构和重塑其基础。这些变化不单提供了产品性能，还提高了其健壮性。 测试框架：在所有支持的浏览器上对框架进行了持续全面的测试...
5. `test.openclose.html`：可能涉及编辑器的打开和关闭操作，例如在需要时动态加载或隐藏TinyMCE。 6. `test.anchorlayout.html`：锚点布局（Anchor Layout）允许组件根据容器大小自动调整尺寸，这里可能展示如何...
conn.Open "Provider=SQLOLEDB;Data Source=;Initial Catalog=;User ID=;Password=<your_password>" ' 查询用户信息 sql = "SELECT * FROM Users WHERE Username='" & username & "' AND Password='" & password & ...
xhr.open(options.method, options.url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 处理响应 } }; xhr.send(options.data); } }; ``` 以上...
### ExtJS 3.0 AJAX 同步请求详解 #### 一、引言 ExtJS 是一款基于 JavaScript 的开源框架，用于构建现代化的 Web 应用。它提供了丰富的 UI 组件以及强大的数据处理能力，使得开发者能够快速地开发出高质量的企业...
在“oms.rar_OMS php_extjs_oms_php extjs_php-ext”这个项目中，我们可以看到它是一个基于PHP和EXTJS框架构建的ODF（Open Document Format，开放文档格式）管理系统模型。下面将详细解释这些技术及其在系统中的应用...
html: '<h1>Hello, easyjf open source</h1>' }); win.show(); }); ``` 这个例子展示了如何动态创建一个窗口组件，并在其内部显示自定义内容。 3. EXTJS组件体系： EXTJS的组件库主要分为底层API、控件...
conn.open("POST", "/SanXiaMS/servlet/AccountBookServlet1?CustomFormName=" + CustomFormName1, false); conn.send(null); // 获取服务器响应结果 var str = conn.responseText; alert(str); } }); ``` ...
如果是使用EPPlus，它可以操作Open XML格式的Excel文件，无需安装Office，且性能更优。 以下是一个简单的C#示例，使用EPPlus创建Excel文件： ```csharp using OfficeOpenXml; // 获取EXTJS发送的数据 var data = ...
con.Open(); SqlCommand cmd = new SqlCommand("SELECT * FROM TB_MOVIE ORDER BY MovieTitle OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY", con); cmd.Parameters.AddWithValue("@Offset", (pageIndex ...
函数内部调用了`window.open`方法打开一个新的浏览器窗口，URL指向服务器上的`getExecl.do` action。这样做是为了触发后台生成Excel报表的逻辑，并将生成的Excel数据通过HTTP响应发送回前端。 接下来，我们关注后端...