基于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这才是场景开发中最重要的地方

===============================================

<!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>

  

时间: 2024-10-13 22:45:14

基于ExtJS实现床位卡的相关文章

基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式定义 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

基于Extjs的web表单设计器 第五节——数据库设计

这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计 基于Extjs的web表单设计器 第八节——表单引擎设计 这一节我给大家介绍一下表单设

Anynote 基于ExtJS多用户个人信息管理系统

Anynote——个人信息管理系统 —–主要用于学习交流—– 源码下载:https://git.oschina.net/xiyt/Anynote.git 一.系统说明 Anynote是一个基于extjs.struts.spring.ibatis构建的开源的支持多用户的个人信息管理系统, 并且各个功能模块都可以选择性的开启或者停用,主要功能包括: 1.任务管理,记录工作和生活中的待办事项,有效安排时间,支持分类.设定优先级: 2.日常笔记,不管是记录日常生活的点点滴滴,还是收藏一些好的网文,都是不

Quartz.Net 作业调度后台管理系统,基于Extjs

Quartz.Net是一个开源的.非常灵活的作业调度框架,具体使用方法和教程:http://www.cnblogs.com/shanyou/archive/2007/08/25/quartznettutorial.html 虽然很优秀,但使用过程中没有找到一个合适的后台任务配置系统,有时是CronExpress的生成,看过:http://www.cronmaker.com/ 等但都不是特别合适,最好是能参考MSSQL里的作业调度来设计. Extjs是最牛逼的RichClient前端开发框架,下面

基于ExtJS 4.2.1 + Hibernate 4.1.7 + Spring MVC 3.2.8 的通用后台管理系统

一.系统介绍 1.基于最新的ExtJS 4.2.1.883开发. 2.支持MySQL.SQL Server.Oracle.DB2等关系数据库. 3.本系统可作为OA.网站.电子政务.ERP.CRM等基于B/S架构的应用软件系统的快速开发框架. 源码有50多M(包括Jar包和SQL文件),点此获取. 二.特色功能1.采用Spring MVC的静态加载缓存功能,在首页将Javascript文件.CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS的加载速度.2.增加新的ExtJS Ne

基于OpenCV的图片卡通化处理

学习OpenCV已有一段时间,除了研究各种算法的内容,在空闲之余,根据书本及资料的引导,尝试结合图像处理算法和日常生活联系起来,首先在台式机上(带摄像头)完成一系列视频流处理功能,开发平台为Qt5.3.2+OpenCV2.4.9. 本次试验实现的功能主要有: 调用摄像头捕获视频流: 将帧图像转换为素描效果图片: 将帧图像卡通化处理: 简单地生成"怪物"形象: 人脸肤色变换. 本节所有的算法均由类cartoon中的函数cartoonTransform()来实现: // Frame:输入每

目录视图摘要视图订阅 基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)

原文地址:http://blog.csdn.net/kunoy/article/details/8007585 本文主要解决问题: 1.区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,extjs也可以用lable组件标识,但这样做很麻烦,每一个不允许为空的文本框都需要多加一个lable组件,如果用一个方法自动为不允许为空的文本框加上这个*号,在form等布局的情况下,也是可行的,但如果是absolute布局,你会发现界面就不那么舒畅了. 2.添加文本框验证错误提示,如果你采用的是for

基于Extjs的web表单设计器 第三节——控件拖放

看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性区域.这样的UI设计肯定就得支持控件的拖拽设计,用户只要拖放一个控件到我们的画布上,那么画布就应该立即能够看到我们拖放的控件在画布中的位置.大小.以及一些控件自带的默认信息.不用说这样的设计对于用户来说不论在操作体验上还是设计的感官上都更加直接和方便,因为我在设计阶段就可以知道我设计后的表单在系统运