Extjs与PHP的数据交互实践：增删查改操作

本文将解析如何在Extjs框架下与PHP进行数据交互，实现增删查改的基本操作。在示例代码中，主要展示了HTML头部引入的相关CSS和JavaScript库，以及自定义的函数，用于与服务器端进行数据通信。 首先，我们看到HTML头部引入了Extjs的相关库，包括`ext-all.css`用于样式，`jquery.js`作为JavaScript库，以及`ext-base.js`，`ext-all.js`和`ext-lang-zh_CN-min.js`，这些都是Extjs的核心组件，用于构建用户界面和管理数据。 接着，初始化了Extjs的快速提示对象`Ext.QuickTips.init()`，这通常用于设置控件的提示信息。然后定义了一个`test`函数，它使用`Ext.Msg.alert`弹出一个警告对话框，这是Extjs提供的消息提示功能。 在`renderSex`函数中，根据传入的性别值（'male'或'female'），返回不同的HTML字符串，包含了颜色和图片，用于在界面上展示性别信息。这个函数可以作为列渲染器使用，使得数据显示更加直观。 接下来的`init`函数是整个应用的核心，它创建了一个`HttpProxy`对象，用于与PHP服务器进行数据交互。`HttpProxy`的URL设置为`index.php`，意味着所有的数据请求都将发送到这个PHP脚本处理。然后定义了数据响应的JSON属性`totalProperty`和数据根节点`jsonRoot`，这是Extjs解析服务器返回的JSON数据时所必需的。 `Record`数组定义了数据模型，列出了与数据库字段相对应的属性，例如'id'，'name'和'pass'等。这些属性将在数据表格中显示。 在实际的数据交互中，通常会创建一个`Store`对象，它会使用之前定义的`HttpProxy`，`jsonProperty`，`jsonRoot`和`Record`。`Store`会负责加载、保存和管理数据。例如，你可以创建一个新的`Store`实例，并配置数据加载的参数，如分页和排序。 在数据表格（`GridPanel`）中，通过`store`属性绑定到上述的`Store`，并定义列模型（`columns`），列模型中的每个对象包含`header`（列头文本）和`dataIndex`（对应数据模型中的属性名）。还可以定义编辑器（`editor`）以便用户可以直接在表格中修改数据。 对于增删查改操作，Extjs提供了相应的API。例如，添加数据可以使用`store.add()`，删除数据是`store.remove()`，更新数据则通过`store.sync()`同步到服务器。查询数据通常涉及`store.load()`方法，可以传递参数来过滤数据。 在PHP端，你需要编写处理这些请求的逻辑，接收来自Extjs的POST或GET数据，执行相应的数据库操作（如SQL查询），然后返回JSON格式的结果。返回的数据必须按照`jsonProperty`和`jsonRoot`指定的结构组织，以便Extjs能够正确解析。 总结来说，Extjs与PHP的数据交互涉及到前端的UI构建、数据模型定义、数据请求与响应的处理，以及后端的数据库操作。理解这些知识点对于开发基于Extjs的Web应用至关重要。