Extjs4.1:一个ExtJs框架-combobox读取数据库
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或者其他服务器端程序。
源代码打包，在我的资源里。
