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的手风琴模式,需要注意 ...
随机推荐
- Linux shell —— 数组与关联数组
使用 declare -A(declare 的用法请使用 help 进行查看,help declare) 进行声明关联数组变量: $ declare -A fruits_price $ fruits_ ...
- <div class="clear"></div>
<div class="clear"></div> 这里的clear是样式名.样式写在CSS文件中 从名称来看估计你的样式为:.clear {clear:b ...
- Docker使用rexray做跨主机存储
Rex-Ray 是一个优秀的 Docker volume driver,不过只有最新版docker才支持. Rex-Ray 以 standalone 进程的方式运行在 Docker 主机上,安装方法很 ...
- Fzu软工第二次作业-词频分析
(0)前言: Github项目 作业地址 (1)PSP表格: PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 ...
- Elasticsearch 索引的全量/增量更新
Elasticsearch 索引的全量/增量更新 当你的es 索引数据从mysql 全量导入之后,如何根据其他客户端改变索引数据源带来的变动来更新 es 索引数据呢. 首先用 Python 全量生成 ...
- Executors Future Callable 使用场景实例
https://www.jb51.net/article/132606.htm: 我们都知道实现多线程有2种方式,一种是继承Thread,一种是实现Runnable,但这2种方式都有一个缺陷,在任务完 ...
- ppt标题排版
- Hadoop伪分布模式操作
http://blog.csdn.net/wangloveall/article/details/20195813 摘要:本文介绍Hadoop伪分布模式操作,适合于Hadoop学习.开发和调试. 关键 ...
- ECHO不换行
我想用批处理实现向s.txt中多次分别导入文本例如:“aaaa","bbbb","cccc","dddd"实现s.txt内效果如: ...
- 关于 Cookie-free Domains (为什么将静态图片，js，css存放到单独的域名？)
这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...