首页 > 代码库 > Extjs6（三）——用extjs6.0写一个简单页面
Extjs6（三）——用extjs6.0写一个简单页面
本文基于ext-6.0.0
一、关于border布局
在用ext做项目的过程中，最常用到的一种布局就是border布局，现在要写的这个简单页面也是运用border布局来做。border布局将页面分为五个部分，分别是north、south、west、east、center，对应着上、下、左、右、中，下面看一个简单的border布局的例子。
Ext.define(‘Learning.view.treelearn.trees‘, { extend: ‘Ext.panel.Panel‘, xtype:‘trees-main‘, referenceHolder: true, layout: ‘border‘, defaults:{ collapsible: true, split: true }, items: [ { region :‘north‘, bind: { html: ‘上‘ } }, { region :‘south‘, bind: { html: ‘下‘ } }, { reference:‘treesLeft‘, //xtype:‘treesLeft‘, region :‘west‘, width:200, bind: { html: ‘左‘ } }, { region :‘east‘, width:200, bind: { html: ‘右‘ } }, { reference:‘treesCenter‘, region :‘center‘, bind: { html: ‘中‘ } }, ]});
二、写north部分（头部）
上面这部分通常写系统名，用户名，也可以加注销按钮，搜索框等，这里就简单写个名字。
1、在上面的trees.js基础上改一下，加入treesTop
{ reference:‘treesTop‘, xtype:‘treesTop‘, region :‘north‘, collapsible: false, split: false, height:50 },
2、treesTop.js
Ext.define(‘Learning.view.treelearn.region.treesTop‘, { extend: ‘Ext.toolbar.Toolbar‘, xtype:‘treesTop‘, style:‘background-color:#35baf6;color:#fff;‘, items:[ { xtype:‘label‘, bind:{ text:‘Extjs Learning‘ }, style:‘font-size:20px;font-weight:bold;‘ },‘->‘, { xtype:‘label‘, bind:{ text:‘当前用户：‘+‘麦豇豆‘, }, }, ] });
三、写west部分（左侧导航栏）
下图一是导航栏完成效果，图二是目录结构（就是我这里用到的文件都放在哪了）
1、在上面的trees.js中改一下，加入treesLeft
{ reference:‘treesLeft‘, xtype:‘treesLeft‘, region :‘west‘, width:220, bind: { html: ‘左‘ } },
2、写treesLeft.js，数据来自store
Ext.define(‘Learning.view.treelearn.region.treesLeft‘, { extend: ‘Ext.tree.Panel‘, xtype:‘treesLeft‘, title:‘导航菜单‘, lines: false, rootVisible: false, store:Ext.create(‘Learning.store.treelearn.treesLeftStore‘, { storeId: "treesLeftStoreId" }),});
3、treesLeftStore.js，模拟ajax，加载data.json中的数据
Ext.define(‘Learning.store.treelearn.treesLeftStore‘, { extend:"Ext.data.TreeStore", alias: ‘store.treesLeftStore‘, proxy: { type: ‘ajax‘, url: ‘app/data/data.json‘ }, root: { expanded: true }, autoLoad: true});
4、data.json，一般后台传过来的就是json数据，这里写的内容不涉及到后端，所以就自己模拟数据了。（这里少写几条数据，就是展示下格式）
[ { text: ‘Panels‘, id: ‘panels‘, expanded: true, children: [ { id: ‘basic-panels‘, text: ‘Basic Panel‘, leaf: true }, { id: ‘framed-panels‘, text: ‘Framed Panel‘, leaf: true } ] }, { text: ‘Trees‘, id: ‘trees‘, expanded: true, children: [ { id: ‘basic-trees‘, text: ‘Basic Trees‘, leaf: true }, { id: ‘tree-reorder‘, text: ‘Tree Reorder‘, leaf: true } ] },]
-----------------------到这里侧边栏的样子就出来了----------------------------------------
但是只是样子货，能看不能用，下一篇写怎么让它可以跳转页面。
Extjs6（三）——用extjs6.0写一个简单页面
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。