入门基础学习 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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
JavaScript 特殊字符
Apr 05 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
DOM 高级编程
May 06 Javascript
Javascript函数式编程语言
Oct 11 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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/03 咖啡文化
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
js命名空间写法示例
2015/12/18 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
python多线程和多进程关系详解
2020/12/14 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
总务岗位职责
2013/11/19 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
询价采购方案
2014/06/09 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
社保转移委托书范本
2014/10/08 职场文书
工作表扬信范文
2015/01/17 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
MySQL时区造成时差问题
2022/04/13 MySQL
设置IIS Express并发数
2022/07/07 Servers