- 浏览: 713650 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ron.luo:
群主有开放源代码吗?
统一用户权限管理系统(正式版) -
名字应该取长点:
楼主可不可以问你几个问题呀,关于这个插件,貌似单线程,而且不分 ...
Extjs3.3 + swfUpload2.2 实现多文件上传组件 -
mayouth:
不知道楼主能不能解决下浏览器兼容的问题,目前好像火狐和谷歌浏览 ...
Extjs3.3 + swfUpload2.2 实现多文件上传组件 -
一水无间:
...
pushlet + Extjs 聊天室v0.9 (含源码) -
jintt123:
你好!我后台用的是C#,为什么一直上传失败,好像是后台取不到参 ...
多文件上传UploadPanel for extjs4(swfuoload2.5)
第五章 Extjs如何实现“T”型系统首页布局 (入门教程)
看这章前,您有必要去看一下 EXT borderLayout图解(初学有用) 这遍文章。因为实现这种传统的应用系统布局,我们用了Extjs的borderLayout。系统截图如下:
T型首页布局图
代码如下:
var WebApp = {}; WebApp.Desktop = function(){ this.Banner = new Ext.Panel({ region : "north", margins: '0 0 2 0', contentEl : "header", height : 62, bbar : this.createTopMenu() }); this.WestMenu = new Ext.Panel({ region : "west", margins: '0 5 0 0', layout:'accordion', width : 200, items : [{ title : "客户管理" },{ title : "报表管理" },{ title : "退货管理" }] }); this.MainPanel = new Ext.TabPanel({ region : "center", activeTab: 0, items: [{ title : '信息区', frame : true }] }); WebApp.Desktop.superclass.constructor.call(this, { layout : "border", items : [this.Banner, this.WestMenu, this.MainPanel] }); } Ext.extend(WebApp.Desktop, Ext.Viewport, { createTopMenu : function(){ return ['->',{ xtype : "tbitem", autoEl : { tag: 'img', src: 'common/css/images/user_green.gif' } },{ xtype : "tbtext", text : "用户名:czp" },'-',{ xtype : "tbitem", autoEl : { tag: 'img', src: 'common/css/images/user_green.gif' } },{ xtype : "tbtext", text : "部门:研发部" }] } });
创建实例:
Ext.onReady(function(){ new WebApp.Desktop(); });
这里无非用到了Extjs 的 border布局罢了。
评论
16 楼
czpae86
2010-04-19
equalto 写道
这样的extend,不如不要。
看见很多人的extend,不是产生一个“可复用”的组件,而是就做一个专门的功能,对ext的extend,真的是滥用。
如果页面不刷新的话,这样的代码,会致使“类”越来越多。
ext里面专门做了destroy,就是为了回收。
看见很多人的extend,不是产生一个“可复用”的组件,而是就做一个专门的功能,对ext的extend,真的是滥用。
如果页面不刷新的话,这样的代码,会致使“类”越来越多。
ext里面专门做了destroy,就是为了回收。
这样写是有原因的,这样的代码结构容易维护,面向对象,当然有类似当然直接复用。如果不这样写难道写成多个function?
如果页面不刷新的话,这样的代码,会致使“类”越来越多??
这个是什么原理??
15 楼
czpae86
2010-04-19
atgoingguoat 写道
楼上的写的好。上次我在 ext.panel 加个 button,被事件的问题搞的要死。
建议先把Extjs里面的例子看了再说。
14 楼
czpae86
2010-04-19
windlike 写道
关键是右边的tabpanel怎么写,里边要不要iframe,页面怎么写,关键的没说出来啊,光介绍布局有啥用
不用iframe,用autoLoad,或者其他动态加载
13 楼
atgoingguoat
2010-03-27
楼上的写的好。上次我在 ext.panel 加个 button,被事件的问题搞的要死。
12 楼
equalto
2010-03-24
这样的extend,不如不要。
看见很多人的extend,不是产生一个“可复用”的组件,而是就做一个专门的功能,对ext的extend,真的是滥用。
如果页面不刷新的话,这样的代码,会致使“类”越来越多。
ext里面专门做了destroy,就是为了回收。
看见很多人的extend,不是产生一个“可复用”的组件,而是就做一个专门的功能,对ext的extend,真的是滥用。
如果页面不刷新的话,这样的代码,会致使“类”越来越多。
ext里面专门做了destroy,就是为了回收。
11 楼
jasonw68
2010-03-24
提示:EXT-all.js不支持此接口
10 楼
pipilu
2010-02-22
楼主继续啊。期待更多的文章
9 楼
54powerman
2010-02-20
学习中,试试看。
8 楼
00915132
2010-02-20
284630191 写道
smilebug 写道
windlike 写道
关键是右边的tabpanel怎么写,里边要不要iframe,页面怎么写,关键的没说出来啊,光介绍布局有啥用
直接建个tabpanel把你多个组件放到items里面就可以了,至于使不使用iframe这个就要看你怎么设置你的组件了,一般是不需要iframe的
var tabs = new Ext.TabPanel({
activeTab: 0,
items:[
{contentEl:'tab1', title:'Tab 1'},
{contentEl:'tab2', title:'Tab 2'}
]
});
你这样是写死的,那我想动态加载呢?
貌似楼主已经注明是新手有用了......
如果要动态在界面出来前异步拿,然后再弄出来,如果是渲染之后的动态就动态的add/remove,这些都extjs都可以做
7 楼
284630191
2010-02-10
smilebug 写道
windlike 写道
关键是右边的tabpanel怎么写,里边要不要iframe,页面怎么写,关键的没说出来啊,光介绍布局有啥用
直接建个tabpanel把你多个组件放到items里面就可以了,至于使不使用iframe这个就要看你怎么设置你的组件了,一般是不需要iframe的
var tabs = new Ext.TabPanel({
activeTab: 0,
items:[
{contentEl:'tab1', title:'Tab 1'},
{contentEl:'tab2', title:'Tab 2'}
]
});
你这样是写死的,那我想动态加载呢?
6 楼
liuzk86
2010-02-10
呵呵,顶...
5 楼
smilebug
2010-02-09
mr.a 写道
关键是上边的用户名怎么处理?
bbar : this.createTopMenu()
这里就是创建用户名那块,你看createTopMenu()方法说白了就是一个数组,里面是些字符串和JSON对象
至于具体含义像'->'(居右对齐)这样的缩写可以在extjs官网查下API,找Toolbar,里面有详细说明
而关于xtype的定义即代表什么组件,可以在Component里找到
4 楼
smilebug
2010-02-09
windlike 写道
关键是右边的tabpanel怎么写,里边要不要iframe,页面怎么写,关键的没说出来啊,光介绍布局有啥用
直接建个tabpanel把你多个组件放到items里面就可以了,至于使不使用iframe这个就要看你怎么设置你的组件了,一般是不需要iframe的
var tabs = new Ext.TabPanel({
activeTab: 0,
items:[
{contentEl:'tab1', title:'Tab 1'},
{contentEl:'tab2', title:'Tab 2'}
]
});
3 楼
mr.a
2010-02-09
关键是上边的用户名怎么处理?
2 楼
windlike
2010-02-09
关键是右边的tabpanel怎么写,里边要不要iframe,页面怎么写,关键的没说出来啊,光介绍布局有啥用
1 楼
kaki
2010-02-09
关键是左边的树如何处理?
发表评论
-
统一用户权限管理系统(正式版)
2015-01-08 21:11 50294该系统已停止更新,已发布另外一个平台,演示地址:htt ... -
多文件上传UploadPanel for extjs4(swfuoload2.5)
2012-11-17 14:21 25282UploadPanel for extjs4 使用的是SWFU ... -
Sencha Touch2 MVC Demo (含源码/数据库)
2012-11-08 16:25 7094源码见附件。由于文件太大,resources\media ... -
后台管理
2012-09-09 18:58 3213java6+spring+hibernate+extjs4.1 ... -
一个Ext.DataView / Ext.ListView扩展
2012-07-06 17:43 5489在sencha论坛看到的扩展: 例子: Ext.onR ... -
Extjs chekboxtree PagingTreeLoader 多选、分页
2012-04-13 13:58 2058测试使用版本:extjs3.4.0 效果图: ... -
web即时聊天有消息头像跳动
2012-04-05 14:46 2343结合Extjs tree做的. //有消息头像跳 ... -
表情选择扩展
2012-04-05 14:37 1761/** * 表情扩展 * @param {} c ... -
Extjs4 下拉树( v1.0版本有bug,已经上传一个可以用的)
2012-01-06 17:11 8327Extjs4 下拉树,v1.0版本有bug,请使用“TreeP ... -
Extjs4 动态加载(Ext.Loader)
2011-12-29 14:42 30724项目文件路径图 Ext.Loader.setConfi ... -
Extjs多文件上传(非SWFUpload版)
2011-11-08 17:21 8101Extjs多文件上传(非SWFUpload版) 不用flas ... -
Extjs4 MVC详解
2011-09-27 00:59 18413关于一个ext4MVC的例子,代码中有相关注释; 详细见附件 ... -
Extjs4.0 之Ext.Class 属性详解 (alias/mixins /uses/requires/singleton等属性)
2011-09-02 00:22 21451Ext.Class 属性详解 : 1 , a ... -
Extjs4.0 之Ext.Class 属性详解 (alias/mixins /requires/singleton等属性)
2011-09-02 00:12 2Ext.Class 属性详解 : 1 , a ... -
[keel] 权限管理模块(含前后台代码)
2011-06-12 20:47 10098注意:仅供参考,学习之用!支持开源! 关联文章(必看, ... -
[Extjs4.0] keel_jdbc2.0后台管理模块 (包含前后台源码)
2011-05-26 00:02 15162主要测试Ext4.0而做的! keel后台管理模块: ... -
来看看这几种查询布局,您是否还有其他想法?创意无限!
2010-12-25 01:14 3521来看看这几种查询布局,您是否还有其他想法?创意无限! ... -
Ext3.3.1颜色主题(ext3.3.1-theme)
2010-12-23 22:30 7185支持ext3.3.X css文件见附件 ... -
Extjs3.3结合fckeditor2.6.6实现可视化编辑器(java版)
2010-12-11 21:08 4651工程在附件中,后台为java。 fckeditorDe ... -
Extjs3.3 + swfUpload2.2 实现多文件上传组件
2010-12-06 00:11 35217【该上传组件已经停止 ...
相关推荐
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
Extjs4.0学习手册、入门教程详解学习 Extjs4.0学习手册、入门教程详解学习 Extjs4.0学习手册、入门教程详解学习
ExtJs4.0入门教程,详细介绍ExtJs4.0。
ExtJS入门教程(适合初学者) extjs库文件,简单示例,组件介绍和应用,extjs核心
Extjs布局教程,Extjs 布局,非常好用的Extjs布局教程
ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心
Extjs经典教程,关于面板布局的学习资料,图文并茂,值得一看
用ExtJS4.1布局后台系统,这个是自写的js,extjs4.1的源码包,需要到extjs.org.cn下载。
ExtJs 最新 入门教程(适合新手).ppt
ExtJS入门教程(超级详细).pdf
ExtJS2.0实用简明教程 chm版教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等,是一个非常适合新手的ExtJS入门教程。本教程主要是针对ExtJS2.0进行介绍,全部代码、截图等都是...
extjs入门 extjs入门 extjs入门 extjs入门 extjs入门
给大家分想一套视频教程,Extjs5.0从入门到实战开发信息管理系统(Extjs基础、Extjs5新特性、Spring、Spring mvc、Mybatis),希望对大家学习Extjs5.0有帮助
EXTJS入门教程 组件的介绍与应用 ext核心 Element:Ext的核心 获取多个DOM的节点 响应事件
ExtJS4.2入门教程,
自己写的ExtJs简明教程,第一节是入门,包括如下内容: ExtJs包的内容和简介 Spket插件的安装 API的使用和安装(针对不停loading的问题) 还有入门实例和它的代码
基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的...