ExtJS模板与菜单的使用案例-床位卡
ExtJS的模板的使用：
项目中场景基本就是表格模型：
TPL:自己编写模板
store：数据源
UI组件:
tbar，rbr，bbar实现工具栏
PageBar与StatusBar:可以针对TPL的组件进行分页
SVG可以实现路径绘图
DataView就是UI与TPL,Store联系起来
==============================================
提示组件：
var tip = new Ext.ToolTip({
target: 'dp',
title: '提示详细',
width:200,
html: '确定要查看这个床位的病人的详细信息吗?',
trackMouse:true
});
任务组件:
ExtJS对定时的任务的设置，一般的场景就是页面的定期的刷新，比如30分钟，对比Flex的刷新任务也类型，其实就是他的编程模型简单，理解起来也是比较容易
定时器，模板TPL，Store这才是场景开发中最重要的地方
============================================
这个案例在应用场景个人感觉比较多：
tpl模板
提示toop：大量使用
菜单：在开发中大量使用
===============================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="data-view.css" />
<script language="JavaScript" src="ext-3.4.0/adapter/ext/ext-base.js">
</script>
<script language="JavaScript" src="ext-3.4.0/ext-all.js">
</script>
<script language="JavaScript">
Ext.onReady(function(){ var rightMenu = new Ext.menu.Menu({
items: [{
text: '执行医嘱',
handler: function(){
alert("执行医嘱");
} }, {
text: '浏览病程',
handler: function(){
alert("浏览病程");
} }, {
handler: function(){
alert("病案首页");
},
text: '病案首页'
}, '-', {
text: '检查检验',
handler: function(){
new Ext.Window({title:'检查检验',width:400,height:300,html:'减价检验详细',buttons:[{text:'确定'}]}).show();
}
}]
}); var store = new Ext.data.JsonStore({
fields: ['name', 'url', 'shortName',{
name: 'size',
type: 'float'
}, {
name: 'lastmod',
type: 'date',
dateFormat: 'timestamp'
}],
data: [{
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'aaaaaaaaaaaaa'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}, {
name: 'aaaa',
url: 'images/thumbs/dance_fever.jpg',
shortName: 'C-108床'
}]
}); var tpl = new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap" id="{name}">', '<div class="thumb"><img src="{url}" title="{name}"></div>', '<span class="x-editable">{shortName}</span></div>', '</tpl>', '<div class="x-clear"></div>'); new Ext.Panel({
title: '床位卡面板',
id: 'images-view',
width: 720,
height: 300,
renderTo: 'div',
items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
overClass: 'x-view-over',
emptyText: 'No images to display',
listeners: {
contextmenu: function(dataView, index, node, e){
if (node.tagName == "IMG") {
dataView.menu = rightMenu;
dataView.menu.showAt(e.getXY());
e.stopEvent();
}
}
}
}),
listeners: {
selectionchange: {
fn: function(dv, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
}
}
} }); Ext.getBody().on("contextmenu", Ext.emptyFn,null, {preventDefault: true});
});
</script>
</head>
<body>
<div id="div">
</div>
</body>
</html>
ExtJS模板与菜单的使用案例-床位卡的更多相关文章
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
前言:之前发表过一篇 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...
- Android进阶(二十八)上下文菜单ContextMenu使用案例
上下文菜单ContextMenu使用案例 前言 回顾之前的应用程序,发现之前创建的选项菜单无法显示了.按照正常逻辑来说,左图中在"商品信息"一栏中应该存在选项菜单,用户可进行分享等 ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- Form_通过Custom.pll新增菜单项（案例）
2014-05-31 Created By BaoXinjian
- Java中常用到的文件操作那些事（一）——替换doc文档模板，生成真实合同案例
工作中,我们时常会遇到一些操作文件的操作,比如在线生成合同模板,上传/下载/解析Excel,doc文档转为pdf等操作.本文就已工作中遇到的在线生成合同为例,简要地介绍一种文档替换写法. 本文目的:给 ...
- 值得分享的Bootstrap Ace模板实现菜单和Tab页效果（转）
Ace模板地址:http://code.google.com/p/ace-engine/wiki/AceTemplate(有时会打不开) Ace英文官网:http://wrapbootstrap.co ...
- ASP.NET MVC Bootstrap模板选中菜单高亮显示当前项方法
当我们处理后台显示当前页面,当前页菜单项高亮,我们可以使用js方法,也可用程序实现,使用Bootstrap模板处理高亮并展开方法之一 1.在项目中导入 <script src="/as ...
- ASP.NET MVC EXTJS 通用主菜单框架
一.说明 首先我不知道定义的文章标题是不是准确,我这篇博文介绍的是一个通用的软件主菜单框架,界面布局用的是extjs,还是先上一个图吧. 软件主界面左侧菜单采用的风格是extjs的手风琴模式,需要注意 ...
随机推荐
- 【Android SDK Manager】SDk国内镜像下载地址
中国科学院开源协会镜像站地址: IPV4/IPV6: http://mirrors.opencas.cn 端口:80 IPV4/IPV6: http://mirrors.opencas.org 端口: ...
- App Transfer：苹果允许iOS App从一个开发者帐号转至另一个开发者账号
App Transfer:苹果允许iOS App从一个开发者帐号转至另一个开发者账号 苹果在WWDC上宣布超过30万的开发者为iOS平台开发超过90万的应用,你可能会想到有人想出售或者购买app. 现 ...
- JQuery禁止回车提交表单
//禁止回车键提交表单——动态绑定 $(function(){ $("input").on('keypress', //所有input标签回车无效,当然,可以根据需求自定义 fu ...
- 部署tomcat到Linux
1. alt+p 放文件 2.解压到自定义 apps文件夹中 tar -zxvf apache-tomcat-7.0.68.tar.gz -C apps 3.进入文件启动tomcat/bin ./ ...
- WPF中Image显示本地图片（转）
private void SetSource(System.Windows.Controls.Image image, string fileName) { System.Drawing.Image ...
- 通过HTTP协议发送远程消息
通过HTTP协议发送远程消息 MSMQ一般情况是通过tcp协议进行通讯,但如果遇到端口被禁用或防火墙,则通过HTTP协议发送消息是一个有效的解决办法. 通过HTTP协议发送消息到远程服务器 publi ...
- FastAdmin 离线安装 ueditor 出现 rule 错误
使用的是 phpStudy 的 nginx + php5.6 离线安装 ueditor.zip 出现,安装其它的插件没有问题. Call to a member function rule() on ...
- FastAdmin 浏览器 JS CSS 缓存如何更新？
由于代码修改,但文件名没有修改,因为浏览器对 JS 和 CSS 是缓存的,而且由于服务器无法控制客户端的缓存. 但是可以对 JS 和 CSS 的请求加上版本号,达到更新缓存的效果.
- Spring 相关注解
spring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释,它们分别是:@Repository.@Service 和 @Controller. 在目前的 Sprin ...
- maven工程下的“run as application”
为了让maven能够在Terminal窗口执行(比在Console执行方便多了,命令行总是比右键选择run要快),需要配置如下的profile:然后敲入 mvn -test -Prun 即可. ...