ext combobox动态加载数据库数据(附前后台)

下面是详细的“ext combobox动态加载数据库数据(附前后台)”攻略。

什么是 ext combobox？

ext combobox 是一种基于 ExtJS 框架开发的下拉菜单组件，它可以非常方便的实现下拉菜单的各种交互功能，同时也可以动态加载数据库数据实现自动填充下拉列表。

ext combobox 动态加载数据库数据操作步骤

1. 创建数据库表

我们需要创建一张数据库表，用来存储下拉列表的选项数据。以 MySQL 数据库为例，可以使用以下的 SQL 语句在数据库中创建一张表：

CREATE TABLE `options` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `text` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `value` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

其中 text 列用来存储选项的文本，value 列用来存储选项的值。

1. 后端代码实现

接下来我们需要编写后端的代码，用来从数据库中加载选项数据。以 PHP 语言为例，可以使用以下的代码实现：

<?php
$dbhost = 'localhost';
$dbuser = 'username';
$dbpass = 'password';
$dbname = 'database';

$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$conn) {
    die('Could not connect: ' . mysqli_connect_error());
}

$sql = "SELECT id, text, value FROM options";
$result = mysqli_query($conn, $sql);

$items = array();
while ($row = mysqli_fetch_assoc($result)) {
    $items[] = array(
        'id'    => $row['id'],
        'text'  => $row['text'],
        'value' => $row['value']
    );
}

mysqli_close($conn);

header('Content-type: application/json');
echo json_encode($items);
?>

该代码将选项数据以 JSON 格式输出，供前端的 ext combobox 组件加载使用。

1. 前端代码实现

最后，我们需要编写前端的代码，使用 ext combobox 组件加载后端提供的选项数据。以下是一个完整的前端代码示例：

Ext.onReady(function() {
    var store = Ext.create('Ext.data.Store', {
        fields: ['id', 'text', 'value'],
        proxy: {
            type: 'ajax',
            url: 'get-options.php',
            reader: {
                type: 'json',
                rootProperty: ''
            }
        },
        autoLoad: true
    });

    var combobox = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: '选项',
        store: store,
        displayField: 'text',
        valueField: 'value',
        queryMode: 'remote',
        forceSelection: true,
        allowBlank: false
    });

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'Ext ComboBox 动态加载数据库数据示例',
        width: 400,
        bodyPadding: 10,
        items: [combobox]
    });
});

以上代码中，我们创建了一个 Ext.data.Store 对象，用来加载后端提供的选项数据。然后，我们创建了一个 Ext.form.field.ComboBox 对象，将 store 设置为上面创建的 store 对象，以实现动态加载选项数据。

最后，我们创建了一个 Ext.form.Panel 对象，将 combobox 加入到表单中，并将表单渲染到页面中。

至此，一个完整的 “ext combobox动态加载数据库数据(附前后台)”示例已经完成。

附加示例

以下是另外两个 ext combobox 动态加载数据库数据的示例，供参考：

示例1. 加载远程后端数据

Ext.onReady(function() {
    var store = Ext.create('Ext.data.Store', {
        fields: ['id', 'text', 'value'],
        proxy: {
            type: 'ajax',
            url: 'http://example.com/get-options.php',
            reader: {
                type: 'json',
                rootProperty: ''
            }
        },
        autoLoad: true
    });

    var combobox = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: '选项',
        store: store,
        displayField: 'text',
        valueField: 'value',
        queryMode: 'remote',
        forceSelection: true,
        allowBlank: false
    });

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'Ext ComboBox 动态加载数据库数据示例',
        width: 400,
        bodyPadding: 10,
        items: [combobox]
    });
});

示例2. 加载本地数据

Ext.onReady(function() {
    var store = Ext.create('Ext.data.Store', {
        fields: ['id', 'text', 'value'],
        data: [
            {id: 1, text: '选项1', value: '1'},
            {id: 2, text: '选项2', value: '2'},
            {id: 3, text: '选项3', value: '3'}
        ]
    });

    var combobox = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: '选项',
        store: store,
        displayField: 'text',
        valueField: 'value',
        forceSelection: true,
        allowBlank: false
    });

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'Ext ComboBox 动态加载数据库数据示例',
        width: 400,
        bodyPadding: 10,
        items: [combobox]
    });
});

在这个示例中，我们直接将选项数据定义在 Ext.data.Store 对象的 data 属性中，以实现加载本地数据的功能。