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的手风琴模式,需要注意 ...
随机推荐
- grafana dashboard的导入导出
grafana的官方提供了很多社区或者官方设置的漂亮的dashboard,地址如下: 点击打开链接 导入图表大大节省了我们配置监控的时间,非常方便. 以linux host overview为例,首先 ...
- pygame经典sprite精灵类
import cStringIO, base64 import pygame from pygame.locals import * class Ball(pygame.sprite.Sprite): ...
- HDU 1853
http://acm.hdu.edu.cn/showproblem.php?pid=1853 和下题一模一样,求一个图环的并,此题的题干说的非常之裸露 http://www.cnblogs.com/x ...
- web测试小结
今年5月份开始接触web测试,经过大半年的测试及学习,简单总结下 测试过程: 1.需求理解 2.测试策略.方案.用例编写及评审 3.测试环境搭建 4.测试执行 5.bug提单.问题跟踪 6.回归测试 ...
- uva1482：Playing With Stones （SG函数）
题意:有N堆石子,每次可以取一堆的不超过半数的石子,没有可取的为输. 思路:假设只有一堆,手推出来,数量x可以表示为2^p-1形式的必输. 但是没什么用,因为最后要的不是0和1,而是SG函数:所以必输 ...
- Windows环境下搭建Nginx和多版本PHP共存
PHP版本众多,彼此之间兼容性不好,不同程序经常需要的不同版本的PHP版本.这里介绍如何使用NGINX让不同版本的PHP共存. 软件下载地址 与nginx整合的php需要选择Non Thread Sa ...
- 前端内容安全策略（csp）
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源( ...
- shell学习笔记汇总
1.shell脚本中函数使用 函数定义在前,调用在后,顺序反了就没有效果了.函数调用为:函数名 参数列表 函数内部通过以下变量访问函数的参数:shell脚本函数中: $0: 这个脚本的名字 $n: 这 ...
- day26 python学习 对象的接口，封装，私用属性 property
# 抽象类和接口类 #** #不崇尚接口类 #python本身支持多继承,没有接口专用的语法.但是我知道接口的概念 # 接口类:# 是规范子类的一个模板,只要接口类中定义的,就应该在子类中实现# 接口 ...
- Oracle 11gR2 RAC 新特性说明
最近接触了一下Oracle 11g R2 的RAC,发现变化很大. 所以在自己动手做实验之前还是先研究下它的新特性比较好. 一． 官网介绍 先看一下Oracle 的官网文档里对RAC 新特性的一 ...