/**
* */
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)');
}
}
})
});
});
分享到:
相关推荐
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
分享给爱好EXTJS的同胞们! EXTJS4.0文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) ...
extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 1 直接添加其他css文件换肤 好多皮肤上网就可以收到的 如皮肤文件:xtheme olive zip下载 把皮肤文件解压 把css文件 如xtheme olive css 拷贝到...
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
ExtJS 是一个很不错的Ajax 框架,可以用来开发带有华丽外观的富客户端应用,ExtJS 是一个用javascript 编写,与后台技术无关的前端ajax 框架。可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。教程...
开始ExtJS之旅的第一步是要获得开发包,可以从官方网站www.ExtJS.com下载,以保证获 得最新版本。其下载地址是http://www.ExtJS.com/download,下载成功后的开发包是ExtJS- 2.0.2.zip,有6.08MB大。不过不用担心,这...
extjs资料extjs资料extjs资料extjs资料extjs资料
本文适合有一定javascript基础(明确js的面向对象,继承,作用域等)并能熟练使用extjs框架(明确各组件间的继承关系)的人阅读,目的在于对extjs的前台架构进行性能上的优化,核心思想为:“按需索取,晚使用,晚加载...
用extjs框架与go的iris框架进行搭建的一个基础性用户管理系统。 本次的侧重点主要放在Extjs框架的搭建 实现功能: 1.用户登录退出 2.用户信息管理模块 运用extjs框架很好的呈现用户信息,实现分页排序等功能 3....
一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) ...
包含各种类型的extjs小图标,Extjs4小图标
extjs4.0 技术中文视频讲解,内容非常的全,而且讲的也不错,这是第一部分,里面有下载地址 可用迅雷下载。 第一讲:extjs4.0概述和HELLO WORD程序 第二讲:extjs4.0的新特性 第三讲:extjs4.0数据模型--Model 第...
适用于ExtJS4、ExtJS5 MD5加密算法!
javascript 写的 用于在客户端创建丰富多彩的 web 应用程序界面 ExtJS 可以用来开发 RIA Rich Internet Application 富互联网应用系统 的 开源 AJAX 应用框架 使用的开源协 议是 GPL ExtJS 是一个用 javascript 写...
ExtJS 7.6 SDK trial
ExtJS 文字教程 extjs2 dojochina系列 extjs2视频教程 DOJO Extjs3-北风 Extjs3-大漠 ExtJS3.4-界面实战 extjs4 30集 uspcat系列 extjs4 其他视频一套 Extjs4.0MVC项目开发视频教程 extjs4.1.1视频教程 ExtJS4培训...
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插件。 应该是目前写js和ExtJs最好的工具。 先到http://www.easyjf.com/上下载ExtJS2.0。 说明: 1,将下载的压缩包解压到eclipse的安装目录,完成后重启(自动会加载插件,也可CMD ECLIPSE目录 使用...
关于ExtJS内存泄漏问题,一直是ExtJS开发人员困扰的问题,这篇文档很好地解释了什么是内存泄漏,为什么会产生内存泄漏。能够帮助程序员使用ExtJS开发出更高效安全的代码。