Ext教程表单表格的使用

【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件，它允许用户输入、编辑和验证数据。在上述代码中，`sampleFormPanel`是一个FormPanel实例，包含了多个配置属性，用于定制表单的行为和外观。 1. `frame : true`: 添加边框，使得表单看起来更美观。 2. `title`定义了表单的标题。 3. `labelAlign : 'right'`: 设置表单字段标签居右对齐。 4. `labelWidth`定义了字段标签的宽度。 5. `autoHeight`和`autoWidth`分别使表单的高度和宽度自适应内容。 6. `monitorValid : true`: 启用客户端表单验证。 7. `collapsible : true`和`titleCollapse : true`允许表单面板折叠。 8. `reader`定义了一个JsonReader，用于解析从服务器返回的JSON数据，其中`root : 'data'`表示数据数组的键。 9. `items`是表单内的字段集合，通常包括各种输入控件（如文本框、选择框等）。 10. `buttons`定义了表单上的操作按钮，`handler`函数指定了按钮点击时执行的代码。 【EXT表格GridPanel】 EXT表格GridPanel是EXT JS中的另一种重要组件，用于显示和编辑结构化的数据。在示例中，`sampleGridNoPageing`是一个GridPanel实例，用于展示JSON数据。 1. GridPanel的配置项包括但不限于`frame`, `title`, `store`, `columns`等。 2. `store`定义了数据源，通常是一个Store对象，它可以连接到服务器端获取数据。 3. `columns`定义了表格的列，每列包含标题和数据字段映射。 4. `renderer`函数可以用来自定义单元格的渲染方式。 5. `gridPanel`也可以包含操作按钮，例如编辑、删除等。 在实际应用中，FormPanel和GridPanel常结合使用，例如在表单中编辑数据，然后保存到数据库，或者从数据库加载数据到表格中显示。在上述代码的`load`和`submit`方法中，表单数据的加载和提交通过URL与服务器进行交互，`waitMsg`提供了加载提示，`success`和`failure`回调处理操作结果。 总结来说，EXT表单FormPanel和表格GridPanel是EXT JS中构建动态Web应用的关键组件，它们提供了丰富的功能和灵活的配置，可以实现复杂的用户界面和数据管理。通过理解并熟练运用这两个组件，开发者能够构建出交互性强、用户体验良好的数据录入和展示系统。