入门基础学习 ExtJS笔记(一)


Posted in Javascript onNovember 11, 2010

大致看了几天的书籍 查阅了API。头脑里也记不下多少,学习还是动手比较好。就试着开始写写:
首先:开始搭个 界面框架.
第一步当然是引用ExtJs的相关文件:
<link rel="Stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
定义一个Ext.Viewport:
在items的属性里设置:
头部:

{ 
region: 'north', 
html: '<h1 class="x-panel-header">CRM管理系统</h1>', 
autoHeight: false, 
border: false, 
margins: '0 0 5 0' 
}

左侧的管理树:
{ 
region: 'west', 
collapsible: true, 
title: '管理菜单', 
xtype: 'treepanel', 
width: 200, 
autoScroll: true, 
split: true, 
loader: new Ext.tree.TreeLoader(), 
root: new Ext.tree.AsyncTreeNode({ 
expanded: true, 
children: [ 
{ 
text: '系统设置', 
leaf: true, 
url: 'userlist' 
}, 
{ 
text: '用户管理', 
leaf: false, 
children: [ 
{ 
id: 'userlist', text: '用户列表', leaf: true 
} 
] 
}, 
{ id: 'news', 
text: '新闻资讯', 
leaf: true 
}] 
}), 
rootVisible: false, 
listeners: { 
click: function (node, event) { 
//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + node.attributes.text + '"'); 
event.stopEvent(); 
var n = contentPanel.getComponent(node.id); 
// alert(n); 
if (!n && node.leaf == true) { // //判断是否已经打开该面板 
n = contentPanel.add({ 
'id': node.id, 
'title': node.text, 
closable: true, 
autoLoad: { 
url: node.id + '.html', 
scripts: true 
} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性 
}); 
} 
contentPanel.setActiveTab(n); 
} 
} 
}

右边具体功能面板区:
new Ext.TabPanel({ 
region: 'center', 
enableTabScroll: true, 
activeTab: 0, 
items: [{ 
id: 'homePage', 
title: '首页', 
autoScroll: true, 
html: '<div style="position:absolute;color:#ff0000;top:40%;left:40%;">主页</div>' 
}] 
});

这样一个简单的界面就搭出来了。界面如下:
入门基础学习 ExtJS笔记(一)
Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 #Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 #Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 #Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 #Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 #Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 #Javascript
将string解析为json的几种方式小结
Nov 11 #Javascript
You might like
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
PHP ajax 分页类代码
2008/11/13 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
浅析NumPy 切片和索引
2020/09/02 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
opencv实现图像平移效果
2021/03/24 Python
市场专员岗位职责
2014/02/14 职场文书
雨中的树观后感
2015/06/03 职场文书
出生证明范本
2015/06/15 职场文书
禁毒主题班会教案
2015/08/14 职场文书
iPhone13再次曝光
2021/04/15 数码科技
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android