入门基础学习 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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
JQuery jsonp 使用示例代码
Aug 12 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
小程序实现授权登陆的解决方案
Dec 02 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
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
学习php开源项目的源码指南
2014/12/21 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
antd Upload 文件上传的示例代码
2018/12/14 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
JS函数本身的作用域实例分析
2020/03/16 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
详解python中的异常和文件读写
2021/01/03 Python
程序集与命名空间有什么不同
2014/07/25 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
文明寝室申报材料
2014/05/12 职场文书
师德先进个人材料
2014/12/20 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
班主任自我评价范文
2015/03/11 职场文书
岁月神偷观后感
2015/06/11 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
创业计划书之水果店
2019/07/18 职场文书