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的手风琴模式,需要注意 ...
随机推荐
- happypack 进一步 优化 build速率
1.webpack.base.conf.js 使用happypack的正确姿势: 'use strict' const path = require('path') const utils = req ...
- Hashtable实现原理及源码分析
Hashtable简介 和HashMap一样,Hashtable也是一个散列表,存储的内容是键值对(key-value)映射. Hashtable在Java中的定义为: public class Ha ...
- C# 跨线程更新UI界面的适当的处理方式，友好的退出界面的机制探索
本文主要讲讲C#窗体的程序中一个经常遇到的情况,就是在退出窗体的时候的,发生了退出的异常. 工业软件技术交流群:群1:592132877(满) 群2:948305931 欢迎技术探讨 我们先 ...
- stm32 定时器TIM时钟步骤
1)TIM3 时钟使能 . RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIMx, ENABLE); //时钟使能 2) 初始化定时器参数,设置自动重装值, 分频系数, ...
- Potplayer快捷键
potplayer 滞后快捷键: x potplayer 滞后快捷键: c Crtl+C:截图到剪切板 Crtl+E:截图到安装目录Capture
- Codeforces Round #462 (Div. 2) B-A Prosperous Lot
B. A Prosperous Lot time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Android已有的原生Camera框架中加入自己的API的实现方案。
版权声明:本文为CSDN博主(天才2012)原创文章.未经博主同意不得转载. https://blog.csdn.net/gzzaigcn/article/details/25707389 在 ...
- UltraEdit常用设置及快捷键
= 关闭自动加载上次文件的方法,操作方法如下:首先,要打开UltraEdit,然后点击经[高级]-[配置],找到[文件处理]-[加载],把[重新载入先前在启动时打开的文件]勾去掉,并确定就可以了. 附 ...
- apache配置禁止访问某些文件/目录
我们来看俩段通常对上传目录设置无权限的列子,配置如下: 代码如下: ? 1 2 3 4 5 6 <Directory "/var/www/upload"> <Fi ...
- Linux开机自动启动ORACLE设置
1.安装好Oracle数据库后: 执行 dbstart和dbshut会提示: [oracle@oracle11g ~]$ dbstartORACLE_HOME_LISTNER is not SET, ...