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

来源：互联网发布：android 开发mac 教程编辑：程序博客网时间：2024/06/05 03:52

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'    ]});

文件夹结构：

结果图：

需要自己另外开发读取数据库并送出json格式数据的php或者其他服务器端程序。

源代码打包，在我的资源里。