`

extjs

 
阅读更多
/**
 *  */
Ext.onReady(function() {
    ImageModel = Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'resourceid'},
           {name: 'title'},
           {name: 'url_Default'},
           {name: 'filesize', type: 'float'},
           {name:'uploaddate', type:'date', dateFormat:'timestamp'}
        ]
    });

	/**
	 * 数据存储
	 */
	var store = new Ext.data.Store({
				// 获取数据的方式
		model: 'ImageModel',
		proxy : new Ext.data.HttpProxy({
					url : 'rms/resManage.ered?reqCode=querySfxmDatas'	//'gridDemo.ered?reqCode=querySfxmDatas'
				}),
		// 数据读取器
		reader : new Ext.data.JsonReader({
					totalProperty : 'TOTALCOUNT', // 记录总数
					root : 'ROOT' // Json中的列表数据根节点
				}, [{
						name : 'resourceid'
				}, {
						name : 'title' // Json中的属性Key值
					}, {
						name : 'url_Default'
					}, {
						name : 'filesize'
					}, {
						name : 'uploaddate'
					}])
			});   
    store.load();

    Ext.create('Ext.Panel', {
        id: 'images-view',
        frame: true,
        collapsible: true,
        width: 535,
        renderTo: 'dataview-example',
        title: 'Simple DataView (0 items selected)',
        items: Ext.create('Ext.view.View', {
            store: store,
            tpl: [
                '<tpl for=".">',
                    '<div class="thumb-wrap" id="{title}">',
                    '<div class="thumb"><img src="{url_default}" title="{title}"></div>',
                    '<span class="x-editable">{title}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ],
            multiSelect: true,
            height: 310,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images to display',
            plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {}),
                Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'resourceid'})
            ],
            prepareData: function(data) {
                Ext.apply(data, {
                    shortName: Ext.util.Format.ellipsis(data.title, 15),
                    sizeString: Ext.util.Format.fileSize(data.filesize),
                    dateString: Ext.util.Format.date(data.uploaddate, "m/d/Y g:i a")
                });
                return data;
            },
            listeners: {
                selectionchange: function(dv, nodes ){
                    var l = nodes.length,
                        s = l !== 1 ? 's' : '';
                    this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
                }
            }
        })
    });	
});
	

 

分享到:
评论

相关推荐

    extjs4.x学习笔记

    xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...

    EXTJS日期扩展年月和年月日时分秒

    分享给爱好EXTJS的同胞们! EXTJS4.0文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) ...

    ExtJS之实现华丽的皮肤主题更换

    extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤  1 直接添加其他css文件换肤 好多皮肤上网就可以收到的  如皮肤文件:xtheme olive zip下载  把皮肤文件解压 把css文件 如xtheme olive css 拷贝到...

    基于Extjs 4.2的通用权限管理系统,通用后台模板,EF+MVC+Extjs 4.2

    WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...

    EXTJS应用EXTJS应用EXTJS应用EXTJS应用

    EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用

    ExtJS2.0简明教程

    ExtJS 是一个很不错的Ajax 框架,可以用来开发带有华丽外观的富客户端应用,ExtJS 是一个用javascript 编写,与后台技术无关的前端ajax 框架。可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。教程...

    让我们开始EXTJS之旅EXTJS_WEB开发指南

    开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...

    extjs资料extjs资料extjs资料

    extjs资料extjs资料extjs资料extjs资料extjs资料

    Extjs 性能优化 High Performance ExtJs

    本文适合有一定javascript基础(明确js的面向对象,继承,作用域等)并能熟练使用extjs框架(明确各组件间的继承关系)的人阅读,目的在于对extjs的前台架构进行性能上的优化,核心思想为:“按需索取,晚使用,晚加载...

    基于Extjs6.2的用户管理系统.md

    用extjs框架与go的iris框架进行搭建的一个基础性用户管理系统。 本次的侧重点主要放在Extjs框架的搭建 实现功能: 1.用户登录退出 2.用户信息管理模块 运用extjs框架很好的呈现用户信息,实现分页排序等功能 3....

    EXTJS4自学手册

    一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...

    包含各种类型的extjs小图标,Extjs4小图标

    包含各种类型的extjs小图标,Extjs4小图标

    extjs4中文视频下载地址

    extjs4.0 技术中文视频讲解,内容非常的全,而且讲的也不错,这是第一部分,里面有下载地址 可用迅雷下载。 第一讲:extjs4.0概述和HELLO WORD程序 第二讲:extjs4.0的新特性 第三讲:extjs4.0数据模型--Model 第...

    ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法!

    ExtJS快速入门指南

    javascript 写的 用于在客户端创建丰富多彩的 web 应用程序界面 ExtJS 可以用来开发 RIA Rich Internet Application 富互联网应用系统 的 开源 AJAX 应用框架 使用的开源协 议是 GPL ExtJS 是一个用 javascript 写...

    ExtJS 7.6 SDK trial

    ExtJS 7.6 SDK trial

    ExtJs视频教程整包打包

    ExtJS 文字教程 extjs2 dojochina系列 extjs2视频教程 DOJO Extjs3-北风 Extjs3-大漠 ExtJS3.4-界面实战 extjs4 30集 uspcat系列 extjs4 其他视频一套 Extjs4.0MVC项目开发视频教程 extjs4.1.1视频教程 ExtJS4培训...

    extJs 2.1学习笔记

    1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy...

    eclipse-ExtJs插件

    eclipse-ExtJs插件。 应该是目前写js和ExtJs最好的工具。 先到http://www.easyjf.com/上下载ExtJS2.0。 说明: 1,将下载的压缩包解压到eclipse的安装目录,完成后重启(自动会加载插件,也可CMD ECLIPSE目录 使用...

    ExtJS内存泄漏问题详解

    关于ExtJS内存泄漏问题,一直是ExtJS开发人员困扰的问题,这篇文档很好地解释了什么是内存泄漏,为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。

Global site tag (gtag.js) - Google Analytics