如何将ExtJS的“复选框”(按钮)与Javascript/JQuery同步？

要将ExtJS的“复选框”（按钮）与JavaScript/JQuery同步，首先需要理解ExtJS中的复选框组件是如何工作的，以及如何通过事件监听和DOM操作来实现同步。

基础概念

ExtJS: 一个用于构建富客户端Web应用程序的JavaScript框架。
复选框: 一种允许用户选择多个选项的用户界面元素。
同步: 在这里指的是确保ExtJS组件和原生JavaScript/JQuery操作保持一致的状态。

类型

Ext.form.Checkbox: ExtJS中的复选框组件。
JQuery: 一个快速、小巧且功能丰富的JavaScript库。

应用场景

表单验证: 确保用户输入的数据符合要求。
动态内容更新: 根据用户的操作实时更新页面内容。

实现同步的方法

以下是一个简单的示例，展示如何将ExtJS的复选框与JQuery同步：

<!DOCTYPE html>
<html>
<head>
    <title>ExtJS Checkbox Sync Example</title>
    <link rel="stylesheet" type="text/css" href="path/to/extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="path/to/extjs/ext-all.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        Ext.onReady(function() {
            var checkbox = Ext.create('Ext.form.Checkbox', {
                renderTo: Ext.getBody(),
                boxLabel: 'Check me',
                id: 'myCheckbox'
            });

            // 监听ExtJS复选框的变化
            checkbox.on('change', function(cb, newValue) {
                $('#jqueryCheckbox').prop('checked', newValue);
            });

            // 初始化JQuery复选框的状态
            $('#jqueryCheckbox').prop('checked', checkbox.getValue());

            // 监听JQuery复选框的变化
            $('#jqueryCheckbox').on('change', function() {
                checkbox.setValue(this.checked);
            });
        });
    </script>

    <!-- JQuery复选框 -->
    <input type="checkbox" id="jqueryCheckbox">
</body>
</html>