ExtJS4.2动态创建GridPanel工具栏教程

"这篇文档介绍了如何在ExtJS 4.2框架中动态生成一个包含按钮和查询条件的工具栏，特别是在gridPanel中的应用。通过示例代码，展示了如何在视图层和 Toolbar.js 文件中设置组件，并从后台获取数据来构建工具栏。" 在ExtJS 4.2中，动态生成工具栏是一项常见的需求，特别是对于需要根据用户权限或特定场景显示不同功能的界面。在上述例子中，我们看到如何在gridPanel中实现这一功能。首先，我们需要在视图层设置dockedItems属性，这允许我们在组件的顶部或底部添加附加元素，如工具栏和分页栏。 ```javascript this.dockedItems = [ { xtype: Ext.create('Ext.zc.grid.Toolbar',{//工具栏, url: zc.bp()+'/system/tuser!getToolbar.action' }), }, { xtype: 'pagingtoolbar',//分页栏 dock: 'bottom', displayInfo: true, store: this.store } ]; ``` 在上述代码中，我们创建了一个新的`Ext.zc.grid.Toolbar`实例，它继承自`Ext.toolbar.Toolbar`，并指定了获取工具栏数据的URL。同时，还定义了一个分页栏，用于显示数据的页码信息。 接下来，我们深入到`Toolbar.js`文件，这是一个自定义的工具栏组件。在这个文件中，我们监听了`render`事件，当工具栏渲染完成后，会发送一个Ajax请求到指定的URL获取工具栏的配置数据。 ```javascript listeners: { render: function(view, eOpts) { var url = view.url; Ext.Ajax.request({ url: url, success: function(response, options) { var text = response.responseText; var data = Ext.JSON.decode(text).data; Ext.each(data, function(item) { var xtype = item.xtype; if (xtype == 'text') { view.add(item.text); } else { view.add(item); } }); } }); } } ``` 在`success`回调函数中，我们解析服务器返回的JSON数据，然后遍历每个条目，如果条目类型是`text`，则将其作为文本添加到工具栏；否则，直接将整个条目添加到工具栏。这样，我们就能根据后端返回的数据动态构建工具栏，包括按钮和其他组件。 最后，提到了在后台调用创建工具栏的方法，这个方法应该负责生成用于构建工具栏的JSON数据，但具体的实现没有在此给出。通常，这个方法会根据用户权限或其他业务逻辑生成相应的工具栏配置。 总结来说，这个例子展示了如何在ExtJS 4.2中利用组件系统和异步数据交互动态生成工具栏，使得开发人员能够灵活地控制界面的功能展示。这种做法提高了代码的可维护性和适应性，同时也降低了前端与后端之间的耦合度。