Extjs4.1:一个ExtJs框架-combobox读取数据库

原创于 2013-01-05 15:55:58 发布 · 4.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #ExtJS #EXTJS #Extjs #ExtJs #框架

ExtJs 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架搭建的应用实例，包括HTML页面结构、JavaScript配置、模型定义、数据存储及视图组件等内容。该应用实现了基本的数据加载与展示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

app.html

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script src="/ext/ext-all.js"></script>
    <link rel="stylesheet" href="/ext/resources/css/ext-all.css">
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    models: [
        'ModelXian'
    ],
    stores: [
        'StoreXian',
        'StoreXiang'
    ],
    views: [
        'MyViewport'
    ],
    autoCreateViewport: true,
    name: 'MyApp'
});

ModelXian.js

Ext.define('MyApp.model.ModelXian', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'MC'
        },
        {
            name: 'DM'
        }
    ]
});

ModelXiang.js

Ext.define('MyApp.model.ModelXiang', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'MC'
        },
        {
            name: 'DM'
        }
    ]
});

StoreXian.js

Ext.define('MyApp.store.StoreXian', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.ModelXian'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'MyJsonStore',
            model: 'MyApp.model.ModelXian',
            proxy: {
                type: 'ajax',
                url: '/cgi-bin/wind.exe/read_xian',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            }
        }, cfg)]);
    }
});

StoreXiang.js

Ext.define('MyApp.store.StoreXiang', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.ModelXiang'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'MyJsonStore1',
            model: 'MyApp.model.ModelXiang',
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            }
        }, cfg)]);
    }
});

MyViewport.js

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'west',
                    width: 271,
                    title: 'My Panel',
                    items: [
                        {
                            xtype: 'combobox',
                            autoRender: true,
                            autoShow: true,
                            fieldLabel: '县区',
                            blankText: '请选择市',
                            emptyText: '请选择...',
                            displayField: 'MC',
                            store: 'StoreXian',
                            valueField: 'DM'
                        },
                        {
                            xtype: 'combobox',
                            fieldLabel: '乡镇'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

Viewport.js

Ext.define('MyApp.view.Viewport', {
    extend: 'MyApp.view.MyViewport',
    renderTo: Ext.getBody(),
    requires: [
        'MyApp.view.MyViewport'
    ]
});

文件夹结构：