- 浏览: 7834910 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
发一个不错的ext js 4 MVC的例子:
例子的效果图为:
项目的结构为图为:
1 model层:
2 store:
3 前端view部分
4 view-point:
5 controller控制器
6 app.js
7 html页面:
例子的效果图为:
项目的结构为图为:
1 model层:
Ext.define('ExtMVC.model.ForumThread', { extend: 'Ext.data.Model', fields: [ 'title', 'forumtitle', 'forumid', 'username', {name: 'replycount', type: 'int'}, {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 'lastposter', 'excerpt', 'threadid' ], idProperty: 'threadid' });
2 store:
Ext.define('ExtMVC.store.ForumThreads', { extend: 'Ext.data.Store', model: 'ExtMVC.model.ForumThread', autoLoad: true, remoteSort: true, proxy: { type: 'jsonp', url: 'http://www.sencha.com/forum/topics-browse-remote.php', reader: { root: 'topics', totalProperty: 'totalCount' }, // sends single sort as multi parameter simpleSortMode: true }, sorters: [{ property: 'lastpost', direction: 'DESC' }] });
3 前端view部分
Ext.define('ExtMVC.view.forumThread.ForumThreadGrid' ,{ extend: 'Ext.grid.Panel', alias : 'widget.forumthreadgrid', requires: 'Ext.ux.PreviewPlugin', title : 'ExtJS.com - Browse Forums', disableSelection: true, loadMask: true, viewConfig: { id: 'gv', trackOver: false, stripeRows: false, plugins: [{ ptype: 'preview', bodyField: 'excerpt', expanded: true, pluginId: 'preview' }] }, // 渲染器 renderTopic: function(value, p, record) { return Ext.String.format( '<b>[url=http://sencha.com/forum/showthread.php?t={2}]{0}[/url]</b>[url=http://sencha.com/forum/forumdisplay.php?f={3}]{1} Forum[/url]', value, record.data.forumtitle, record.getId(), record.data.forumid ); }, renderLast: function(value, p, r) { return Ext.String.format('{0}<br/>by {1}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.get('lastposter')); }, initComponent: function() { this.store = 'ForumThreads'; this.columns = [ { id: 'topic', text: "Topic", dataIndex: 'title', flex: 1, renderer: this.renderTopic, sortable: false },{ text: "Author", dataIndex: 'username', width: 100, hidden: true, sortable: true },{ text: "Replies", dataIndex: 'replycount', width: 70, align: 'right', sortable: true },{ id: 'last', text: "Last Post", dataIndex: 'lastpost', width: 150, renderer: this.renderLast, sortable: true }]; // paging bar on the bottom this.bbar = Ext.create('Ext.PagingToolbar', { store: this.store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display", items:[ '-', { xtype: 'button', text: 'Show Preview', pressed: true, action: 'showPreview', enableToggle: true }] }); this.callParent(arguments); } });
4 view-point:
Ext.define('ExtMVC.view.Viewport', { extend: 'Ext.Viewport', layout: 'fit', requires: [ 'ExtMVC.view.forumThread.ForumThreadGrid' ], initComponent: function() { var me = this; Ext.apply(me, { items: [ { xtype: 'forumthreadgrid' } ] }); me.callParent(arguments); } });
5 controller控制器
Ext.define('ExtMVC.controller.ForumThreads', { extend: 'Ext.app.Controller', stores: ['ForumThreads'], models: ['ForumThread'], views: ['forumThread.ForumThreadGrid'], init: function() { this.control({ 'forumthreadgrid button[action=showPreview]': { toggle: this.showPreview } }); }, showPreview: function(btn, pressed){ var preview = Ext.ComponentQuery.query('forumthreadgrid dataview')[0].plugins[0]; preview.toggleExpanded(pressed); } });
6 app.js
Ext.application({ name: 'ExtMVC', paths: { 'Ext.ux': 'extjs/ux/' }, controllers: [ 'ForumThreads' ], autoCreateViewport: true });
7 html页面:
<html> <head> <title>Ext JS 4 MVC Examples - loiane.com</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <style> .x-grid-cell-topic b { display: block; } .x-grid-cell-topic .x-grid-cell-inner { white-space: normal; } .x-grid-cell-topic a { color: #385F95; text-decoration: none; } .x-grid-cell-topic a:hover { text-decoration:underline; } .x-grid-cell-topic .x-grid-cell-innerf { padding: 5px; } .x-grid-rowbody { padding: 0 5px 5px 5px; } </style> <script type="text/javascript" src="extjs/ext-debug.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body> </body> </html>
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 743刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 473三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1437http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 758https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1636即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 947不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2965参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92501. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 587http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 800http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9401 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 535虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 515【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1375https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 766深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 899(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1101https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3109http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1514canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 512http://www.ruanyifeng.com/blog/ ...
相关推荐
jsp整合extjsMVC的一个例子,供大家参考
ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询...
个人写的一个ext4的demo,使用了ext4的前台mvc,myeclipse下的完整代码,包含数据库脚本
Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo
EXT 表格 本地分页的例子 EXT 表格 本地分页的例子
Ext.define('keel.controller.GoodsCtrl', { extend: 'Ext.app.Controller', stores: ['GoodsStore'],//声明该控制层要用到的store models: ['GoodsModel'],//声明该控制层要用到的model views: ['goods....
Ext4构建Mvc架构的例子。熟悉Ext的朋友可以参考下这种写法!
Ext4 Mvc实例
分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT
EXT JS结合MVC操作数据库实例DirectCenter c# 添加删除修改数据
Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子
使用ext4 mvc结构写的一个简单的界面左侧是树形结构。很适合初学者1
该程序采用Ext4 MVC技术搭建的一个页面平台,读者可在本程序基础上添加逻辑操作。
最近需要用到Extjs4做一个管理系统,搞了一天,搭起来一个Extjs4.1的MVC框架,上传到这里分享给大家,保证物有所值。菜单的加载在app\store\frame下的Menu.js文件中,有静态的,有动态的,自己修改一下。里面包含了...
是初学者的例子,很简单 ,很实用
Extjs 4.0 MVC分页实例
Ext.Net/MVC/EntityFramework的结合使用。由于大小限制,项目中使用的DLL不包含在压缩包中。
Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的...
ext js mvc 基本布局 以及菜单栏的点击事件 也是初学者 。