`

EXT JS 4 MVC 分页的例子

ext 
阅读更多
发一个不错的ext js 4 MVC的例子:

例子的效果图为:


项目的结构为图为:



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>
2
7
分享到:
评论
1 楼 zhengeili 2012-08-31  
paths: { 'Ext.ux': 'extjs/ux' },  ux后面 貌似不用加/了吧

相关推荐

    Ext JS mvc +jsp 例子

    jsp整合extjsMVC的一个例子,供大家参考

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询...

    ext4 mvc 例子

    个人写的一个ext4的demo,使用了ext4的前台mvc,myeclipse下的完整代码,包含数据库脚本

    Ext4.0MVC演示例子 Ext4.0MVC

    Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo

    EXT 表格 本地分页的例子

    EXT 表格 本地分页的例子 EXT 表格 本地分页的例子

    ext4的MVC小例子

    Ext.define('keel.controller.GoodsCtrl', { extend: 'Ext.app.Controller', stores: ['GoodsStore'],//声明该控制层要用到的store models: ['GoodsModel'],//声明该控制层要用到的model views: ['goods....

    Ext4Mvc例子

    Ext4构建Mvc架构的例子。熟悉Ext的朋友可以参考下这种写法!

    Ext4 Mvc实例

    Ext4 Mvc实例

    分页EXT分页EXT

    分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT

    EXT JS结合MVC操作数据库实例DirectCenter c#

    EXT JS结合MVC操作数据库实例DirectCenter c# 添加删除修改数据

    Ext4 动态加载js例子

    Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子 Ext4 动态加载js例子

    ext4 mvc 简单的例子

    使用ext4 mvc结构写的一个简单的界面左侧是树形结构。很适合初学者1

    Ext4 MVC 框架设计

    该程序采用Ext4 MVC技术搭建的一个页面平台,读者可在本程序基础上添加逻辑操作。

    Ext4MVC框架

    最近需要用到Extjs4做一个管理系统,搞了一天,搭起来一个Extjs4.1的MVC框架,上传到这里分享给大家,保证物有所值。菜单的加载在app\store\frame下的Menu.js文件中,有静态的,有动态的,自己修改一下。里面包含了...

    Mvc4 分页 排序 搜索

    是初学者的例子,很简单 ,很实用

    Extjs 4.0 MVC分页实例

    Extjs 4.0 MVC分页实例

    Ext.Net与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的演示Ext4.0的mvc的...

    ext js mvc demo 实例

    ext js mvc 基本布局 以及菜单栏的点击事件 也是初学者 。

Global site tag (gtag.js) - Google Analytics