extjs 3.4 border布局

最新推荐文章于 2019-03-25 13:38:49 发布
最新推荐文章于 2019-03-25 13:38:49 发布
阅读量2.7k 收藏
点赞数
分类专栏： extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang623145708/article/details/10193989
版权

最近因为extjs4.0反应速度太慢，所以重新研究了一下3.4，废话也不多说了直接上代码。

 首先是jsp：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>后台管理系统</title>
   
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <link rel="stylesheet" type="text/css" href="<%=basePath %>ext/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/ext-icon.css">
   
<link rel="stylesheet" type="text/css" href="<%=basePath %>css/table.css" />
<link rel="stylesheet" type="text/css"href="<%=basePath %>css/backstage.css" />
    <script type="text/javascript" src="<%=basePath %>ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<%=basePath %>ext/ext-all.js"></script>
    <script type="text/javascript" src="<%=basePath %>ext/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="<%=basePath %>ext/ux/ProgressBarPager.js"></script>
<script type="text/javascript" src="<%=basePath %>backstage/backstage.js"></script>

  </head>
 
  <body>
    <div id="form1"></div>
  </body>
</html>

接着是引用的js：

Ext
  .onReady(function() {
   Ext.QuickTips.init();
   var password = new Ext.Window(
     {
      width : 300,
      height : 250,
      id : 'password',
      labelWidth : 30,
      closeAction : 'hide',
      items : [ {
       xtype : 'form',
       width : 300,
       height : 300,
       title : '修改密码',
       bodyStyle : 'padding-top:10px',
       items : [
         {
          xtype : 'textfield',
          name : 'userInfo.userPwd',
          id : 'userNames',
          fieldLabel : '原密码'
         },
         {
          xtype : 'textfield',
          name : 'Pwd',
          id : 'userPwds',
          fieldLabel : '新密码'
         },
         {
          xtype : 'textfield',
          name : 'Pwds',
          id : 'concreterights',
          multiSelect : true,
          fieldLabel : '新密码'
         },
         {
          xtype : 'button',
          width : 80,
          id : 'update',

          text : '修改',
          handler : function(button) {
           button.ownerCt
             .getForm()
             .submit(
               {
                url : '/copyright3/userInfoAction/updatepassword.action',
                method : 'POST',
                success : function(
                  response) {
                 Ext.Msg
                   .alert(
                     "温馨提示",
                     "密码修改成功");
                 var add = Ext
                   .getCmp("password")
                 add.hide();
                }
               });
          }

         } ]

      } ]

     });
   var obj = [ {
    name : 'userid',
    type : 'integer',
    sortable : true
   },

   {
    name : "userName",
    type : "string",
    sortable : true
   }, {
    name : "userPwd",
    type : "string",
    sortable : true
   }, {
    name : "department",
    type : "string",
    sortable : true
   }, {
    name : "boolvalid",
    type : "string",
    sortable : true
   }, {
    name : "concreteright",
    type : "string",
    sortable : true
   }, {
    name : "beizhu",
    type : "string",
    sortable : true
   } ];
   var stores = new Ext.data.JsonStore( {
    url : "/copyright3/userInfoAction/queryUserInfo.action",
    type : 'json',
    root : 'root',
    fields : obj
   });
   var quanxian = new Ext.Window( {
    id : 'quanxian',
    name : 'quanxian',
    title : '权限设置',
    layout : 'border',
    height : 500,
    width : 800,
    closeAction : 'hide',
    items : [ {
     // layout:'table',
     xtype : 'grid',
     region : 'center',
     collapsible : false,
     id : "quanxianGrid",
     name : "quanxianGrid",
     sm : new Ext.grid.RowSelectionModel( {
      singleSelect : true
     }),
     store : stores,
     multiSelect : true,
     tbar : [ {
      xtype : 'button',
      text : '增加',
      iconCls : 'table_add',
      id : 'find',
      handler : function() {
      }
     }, {
      xtype : 'button',
      text : '修改',
      iconCls : 'table_edit',
      id : 'upload',
      handler : function(grid, rowIndex, colIndex) {
      }
     }, {
      xtype : 'button',
      text : '删除',
      iconCls : 'table_remove',
      id : 'ss',
      handler : function(grid, rowIndex, colIndex) {
      }
     }, {
      xtype : 'button',
      text : '刷新',
      iconCls : 'table_refresh',
      id : 'printin',
      handler : function(grid, rowIndex, colIndex) {
       var grid = Ext.getCmp("quanxianGrid");
       var store = grid.getStore();
       store.load();
      }
     } ],
     columns : [ {
      header : "姓名",
      width : 100,
      sortable : true,
      dataIndex : 'userName'
     }, {
      header : "所在部门",
      width : 200,
      sortable : true,
      dataIndex : 'department'
     }, {
      header : "有效",
      width : 100,
      sortable : true,
      dataIndex : 'boolvalid'
     }, {
      header : "模块权限",
      width : 100,
      sortable : true,
      dataIndex : 'concreteright'
     }, {
      header : "备注",
      width : 250,
      sortable : true,
      dataIndex : 'beizhu'
     } ]

    } ],
    buttons : [ {
     text : '关闭',
     handler : function() {
      quanxian.hide();
     },
     minWidth : 100
    } ]
   });
   var viewport = new Ext.Viewport(
     {
      layout : 'border',
      renderTo : "form1",// 呈现
      items : [
        
        {
         xtype : "panel",
         region : "north",
         id : 'ss',
         height : 30,
         tbar : [ '->', {// 展开搜索菜单
            text : "修改密码",
            xtype : 'button',
            width : 100,
            id : 'newword',
            handler : function() {
             password.show();
            }
           }, {
            text : '权限设置',
            xtype : 'button',
            width : 100,
            handler : function() {
             quanxian.show();
            }
           }, {
            text : '退出',
            xtype : 'button',
            width : 100,
            handler : function() {
             window.close();
            }
           } ]

        },
        {
         region : 'west',// 菜单

         collapsible : true,
         width : 200,
         id : 'tree',
         split : true,
         title : '系统导航菜单',
         xtype : 'treepanel',
          hrefTarget : 'mainContent', 
         root: {
                   nodeType: 'async'
               },
              
               // auto create TreeLoader
               dataUrl: 'backstage/data.json',
         rootVisible : false,

         tbar : [
           {// 展开搜索菜单

            text : "全部展开",

            icon : "/copyright2/backstage/images/accept.png",

            handler : function() {

             Ext.getCmp("tree")
               .expandAll();

            }

           },
           {

            text : "全部收缩",

            icon : "/copyright2/backstage/images/add.png",

            handler : function() {

             Ext.getCmp("tree")
               .collapseAll();

            }

           } ],
         listeners : {// 树的监听器
                'click':function(node, event) {
                if(node.text== "音乐信息管理"){           
           addTab("id1","音乐信息管理", "/copyright3/music/music.jsp");           
          }
                if(node.text == "音乐旧表信息管理"){           
           addTab("id20","音乐旧表信息管理", "/copyright2/backstage/music/jiumusic.jsp");           
          }
          if(node.text=="音乐查询管理"){
           addTab("id2","音乐查询管理","/copyright2/backstage/music/Listmusic.jsp");           
          }
          if(node.text=="片名信息"){
           addTab("id3","片名信息","/copyright2/backstage/music/rights.jsp");
          }
          if(node.text=="监播登记查询管理"){
           addTab("id13","监播登记查询管理","/copyright2/backstage/music/Listrights.jsp");
          }
          if(node.text=="监播登记上传管理"){
           addTab("id14","监播登记上传管理","/copyright2/backstage/music/jianbo.jsp");
          }
          if(node.text=="采购音乐池"){
           addTab("id5","采购音乐池","/copyright2/backstage/music/musicpool.jsp");
          }
          if(node.text=="采购音乐池查询"){
           addTab("id6","采购音乐池查询","/copyright2/backstage/music/Listmusicpool.jsp");
          }
          if(node.text=="年度栏目查重统计"){
           addTab("id19","年度栏目查重统计","/copyright2/backstage/music/chachong.jsp");
          }
          if(node.text=="全年使用记录统计"){
           addTab("id7","全年使用记录统计","/copyright2/backstage/music/statistics.jsp");
          }
          if(node.text=="付费全年使用记录统计"){
           addTab("id8","付费全年使用记录统计","/copyright2/backstage/music/payflagstatistics.jsp");
          }
          if(node.text=="作曲者全年使用记录统计"){
           addTab("id9","作曲者全年使用记录统计","/copyright2/backstage/music/musicauthorpersonal.jsp");
          }
          if(node.text=="作词者全年使用记录统计"){
           addTab("id12","作词者全年使用记录统计","/copyright2/backstage/music/lyricpersonal.jsp");
          }
          if(node.text=="其他信息"){
           addTab("id11","其他信息","/copyright2/backstage/music/movie.jsp");
          
          }if(node.text=="修改合同确认单信息"){
           addTab("id16","修改合同确认单信息","/copyright2/backstage/music/querendan.jsp");
          }
          if(node.text=="恢复合同确认单信息"){
           addTab("id17","恢复合同确认单信息","/copyright2/backstage/music/Contractannex.jsp");
          }
          if(node.text=="特殊版权到期提醒"){
           addTab("id18","特殊版权到期提醒","/copyright2/backstage/music/tixing.jsp");
          }
          if(node.text=="电视版权到期提醒"){
           addTab("id21","电视版权到期提醒","/copyright2/backstage/music/banquan.jsp");
          }
          if(node.text=="网络版权到期提醒"){
           addTab("id22","网络版权到期提醒","/copyright2/backstage/music/wangluo.jsp");
          }
          if(node.text=="音乐上传管理"){
           addTab("id23","音乐上传管理","/copyright2/backstage/music/guanli.jsp");
          }
               }
                
         }
        } ,{
         region : 'center',
         title:"信息展示区域",
         id : "tab",
         xtype:'tabpanel'

        }]
     });

  });

//动态添加标签
function addTab(tarid, tabTitle, targetUrl) {
 Ext.getCmp('tab').removeAll(true);
 var itemId = null;
 Ext.getCmp('tab').items.each(function(item) {
    if (item.getId() == tarid) {// 如果存在面板
     itemId = item.getId();
    }
   });
 if (itemId == null) {
  itemId = tarid;
  Ext.getCmp("tab").add({

   id : tarid,

   title : tabTitle,

   html : "<iframe name='ifm' src="
     + targetUrl
     + " frameborder='0' scrolling='auto' width='100%' height='100%'></iframe>",
   closable : true
  });
 }
 // 显示该界面
 Ext.getCmp("tab").setActiveTab(tarid);

}

页面左边的树结构需要引用一个json文件：

[{
    text: '音乐管理',
    cls: 'folder',
    children: [ {
    text : '音乐信息管理',
    leaf : true
    },{
    text : '音乐旧表信息管理',
    leaf : true
    }, {
    text : '音乐查询管理',
    leaf : true
    },  {
    text : '采购音乐池',
    leaf : true
    }, {
    text : '采购音乐池查询',
    leaf : true
    }, {
    text : '全年使用记录统计',
    leaf : true
    }, {
    text : '年度栏目查重统计',
    leaf : true
    },{
    text : '付费全年使用记录统计',
    leaf : true
    },{
    text : '作曲者全年使用记录统计',
    leaf : true
    },{
    text : '作词者全年使用记录统计',
    leaf : true     
    }]
},{
    text: '监播登记管理',
    cls: 'folder',
    children: [{
    text : '监播登记上传管理',
    leaf : true
    },{
    text : '监播登记查询管理',
    leaf : true
    }]
},{
    text: '电影查询',
    cls: 'folder',
    children: [{
    text : '片名信息',
    leaf : true
     }, {
    text : '其他信息',
    leaf : true
    }]
},{
    text: '确认单信息',
    cls: 'folder',
    children: [{
    text : '修改合同确认单信息',
    leaf : true
     }, {
    text : '恢复合同确认单信息',
    leaf : true
    }]
},{
    text: '特殊版权到期提醒',
    cls: 'folder',
    children: [{
    text : '特殊版权到期提醒',
    leaf : true
    },{
    text : '电视版权到期提醒',
    leaf : true
    },{
    text : '网络版权到期提醒',
    leaf : true
     }]
}]

在3.4中有些方法4.0是不能用的，例如树的监听器 'click':function(node, event) ，在4.0中应该写成itemclick: function(n,record, item, index,  e, eOpts)，

为此纠结了好半天，今天就写到这，在权限管理那块还没有写完。以后会补上。

Raise扬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EXTJS 源码3.4
03-03
extjs源码3.4 里面有其他JS，直接调用就行
ExtJs3.4 api
09-19
extjs3.4api，很实用，方便大家学习extjs，欢迎大家下载 extjs3.4中文api，很实用，方便大家学习extjs，欢迎大家下载
ExtJs布局详解
weixin_33862993的博客
08-28 120
序言     1、百度百科上说：ExtJs功能丰富，无人能出其右。无论是界面之美，还是功能之强，extjs都高居榜首。     2、呵呵，界面之美当是少不了布局的，这篇文章我写layout的七种布局。（extjs是4.+版本） Border布局__边界布局    这中布局是最常用的布局之一，看图                  border布局：border布局也称边界布局，他将...
ExtJs之Border布局
weixin_34186128的博客
10-22 356
2019独角兽企业重金招聘Python工程师标准>>> ...
Extjs3.4
hanwb1的博客
03-25 377
在项目中使用Ext 在项目中使用ExtJs至少包括ext-all.js adapter/ext/ext-base.js src/local/ext-lang-zh_CN.js和整个resources: ext-all.js 和adapter/ext/ext-base.js 包含了Ext的所有功能，所有的javaScript脚本都在这里 src/local/ext-lang-zh_CN.js是...
ExtJS 3.4 源码包
12-21
- **布局管理**：ExtJS提供多种布局方式，如Fit布局、Border布局、Table布局等，使得组件能够适应不同屏幕尺寸和容器大小。 - **数据绑定**：通过Store和Model，ExtJS实现了数据和视图的双向绑定，方便数据的实时...
ExtJS 3.4.0
09-15
3. **布局管理**：框架中的布局管理器（Layout Manager）支持多种布局方式，如Fit布局、Border布局、Table布局等，可以根据需要灵活地组织组件的位置和大小。 4. **Ajax和JSON**：ExtJS 内置了对Ajax的全面支持，...
EXT3.4 中的帮助文件（docs）
03-11
5. **布局管理**：EXT3.4提供了多种布局模式，如Fit布局、Form布局、Border布局、Table布局等，可以灵活地控制组件在容器中的排列方式。 6. **拖放功能**：EXT3.4支持拖放操作，用户可以将组件或数据从一处拖放到另...
ExtJS-3.4.0系列目录
04-08
- `Border`：边框布局，复杂的布局结构，常用于主内容和侧边栏的展示。 - **Ext.container.Viewport**：全屏容器，用于包裹整个应用界面。 - **Ext.tab.Panel**：页签面板，用于展示多个页面内容，每个页面作为一...
Extjs3.0 cookbook
11-13
2. **布局（Layouts）**：EXTJS提供了多种布局方式，如Fit、Border、Form、Table等，允许用户根据需要调整组件的排列和大小。 3. **数据绑定（Data Binding）**：EXTJS的数据绑定允许视图和数据模型之间的自动同步...
extjs3.4
08-06
NULL 博文链接：https://29120406.iteye.com/blog/2082118
ExtJS布局之border实例
07-22
资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javaｓｃｒｉｐｔ写的，主 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
extjs3.4+swfupload上传
10-23
extjs3.4+swfupload整合的上传功能，支持多文件上传
extjs入门--3.4版本
落叶翩翩的CSDN博客
01-04 1547
安装开发环境 1、把下载到的spket-1.6.23解压后,拷贝features和plugins两个文件夹拷贝到eclipse/dropins,然后重启eclipse,      点击Window/Preferences/Spket/JavaScript Profiles,点击New新建一个ExtJs,选中ExtJs，      点击Add Library,在弹出的框中选中ExtJs,然后再
Extjs border 布局
08-10 2071
Ext.onReady(function(){ new Ext.Viewport({ layout: 'border', items: [{ region: 'north', html: 'Page Title',
轻松搞定ExtJs 3.4
A55572278的博客
07-04 263
首先，我们来看看效果，这是需要实现的东东，经典布局，好吧，我承认，这玩意已经被做烂了，但是还是写写，记录下吧，高手略过哦。我不打算写什么分步的教程，教你如何去使用控件，我们的目标只有一个，实现功能，并且我们的时间不多，毕竟时间宝贵，4天完成，后台我采用php(两天学的)，两天写ext后台(其实还有个前台界面，那个就不说了)。 好了，第一天，我们先准备下工具: ...
ExtJs3.4简介
Jston的专栏
07-22 1951
Extjs是一种使用免费，服务收费的js框架。 将js代码压缩成一个文件一行的形式，减少客户端请求服务器的次数，因为是一行，没有换行符，提高了代码解读效率。 在extjs3.4中， Ext-all.css:Ext控件的样式 Ext-all.js：Ext的控件集合 Ext-base.js:Ext的核心
extjs 3.4
maoye的博客
08-31 321
你个憨包娃儿
Extjs的布局控件--border布局
u011123176的专栏
02-21 5160
布局控件 所谓的布局就是指容器组件中子元素的分布,排列组合方式.Ext的所有容器组件都支持布局操作. 每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列,组合以及渲染方式 ExtJS的布局基类为 Ext.layout.ContainerLayout,其他的布局都是继承该类.ExtJS的容器组件包含一个layout及layoutConfig配置属性. 这两个属性用来指定容器使
extjs3.4 批量图片上传
最新发布
06-08
在 ExtJS 3.4 中实现批量图片上传可以通过以下步骤： 1. 创建一个文件上传表单 可以使用 Ext.form.Panel 组件创建一个包含文件上传字段的表单，例如： ``` var formPanel = new Ext.form.Panel({ renderTo: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值