ExtJs4 MVC

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

goods.json，数据库返回的数据：

 

{
    success: true,
    results: [
        {id: 1, name: '商品007',    bm: '2001123456'},
        {id: 2, name: '商品008', bm: '2001123457'}
    ]
}

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

Model层：

GoodsStore.js:

/*
*商品store
*/
Ext.define('keel.store.GoodsStore', {
    extend: 'Ext.data.Store',
    model: 'keel.model.GoodsModel',
    autoLoad: true,   
    proxy: {
        type: 'ajax',
        api: {
            read: 'app/goods.json' //只是一个数据接口,可以按需改变
        },
        reader: {
            type: 'json',
            root: 'results',
            successProperty: 'success'
        }
    }
});

GoodsModel.js:

/*
商品的model层
*/
Ext.define('keel.model.GoodsModel', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'bm']
});

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

view层：

GoodsListView.js:

/*!
* 商品view层,这里只是一个负责显示的grid,没有逻辑代码
*/
Ext.define('keel.view.goods.GoodsListView' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.goodslistview',
    title : '商品列表',
    store: 'GoodsStore',
    columns: [
        {header: '商品编码',  dataIndex: 'bm'},
        {header: '商品名称', dataIndex: 'name'}
    ],
    tbar : [
     {text:'测试1',action:'testBtn1'},'-',
     {text:'测试2',action:'testBtn2'},'-'
    ]
});

 

GoodsWinView.js:

这里只是一个负责显示的窗口
*/
Ext.define('keel.view.goods.GoodsWinView', {
    extend: 'Ext.window.Window',
    alias : 'widget.goodswinview',
    title : '测试',
    autoShow: false,
    height: 200,
    width: 300,
    initComponent: function() {
        this.buttons = [
            {
                text: '点我改变标题',
                scope: this,
                action: 'ok'
            },
            {
                text: '关闭',
                scope: this,
                handler: function(){
        this.close();
       }
            }
        ];
        this.callParent(arguments);
    }
});

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

controller层：

GoodsCtrl.js

/*
商品控制层,
所有逻辑代码都在这里写
*/
Ext.define('keel.controller.GoodsCtrl', {
    extend: 'Ext.app.Controller',
    stores: ['GoodsStore'],//声明该控制层要用到的store
    models: ['GoodsModel'],//声明该控制层要用到的model
    views: ['goods.GoodsListView','goods.GoodsWinView'],//声明该控制层要用到的view
    refs: [//相当于一个映射,这样就可以在控制层方便的通过geter取得相应的对象了
        {
            ref: 'goodslistview',
            selector: 'goodslistview'
        },
        {
            ref: 'goodswinview',
            selector: 'goodswinview'
        }
    ],
    init: function() {
        this.control({//这里的this相当于这个控制层
            'viewport > goodslistview': {
                afterrender: function(gp){//侦听goodslistview渲染
                 gp.down('button[action=testBtn1]').on('click',function(){
                  //侦听goodslistview工具条上action=testBtn1的按钮单击事件
                  this.showWin();
                 },this);
                 
                 gp.down('button[action=testBtn2]').on('click',function(){
                  //侦听goodslistview工具条上action=testBtn2的按钮单击事件
                  alert(this.getGoodslistview().title)
                 },this);
                }
            },
            'goodswinview button[action=ok]': {
             //侦听goodswinview中action=ok的按钮单击事件
                click: function(){
                 this.getGoodswinview().setTitle(Ext.util.Format.date(new Date(),'Y-m-d H:i:s'));
                }
            }
        });
    },
    showWin : function(){
     Ext.create('keel.view.goods.GoodsWinView').show();     
    }
});

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

app.js:

Ext.Loader.setConfig({enabled:true});//开启动态加载

Ext.application({
    name: 'keel',//为应用程序起一个名字,相当于命名空间
   
    controllers: [//声明所用到的控制层
        'GoodsCtrl'
    ],
    launch: function() {//开始
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'goodslistview'
                }
            ]
        });
    }
});

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

index.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>Ext4Mvc</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 
 <link rel="stylesheet" href="lib/resources/css/ext-all.css" type="text/css"></link>
 <script type="text/javascript" src="lib/ext-all.js"></script>
 <script type="text/javascript" src="app/app.js"></script>
  </head>
 
  <body>
   
  </body>
</html>