extjs4﹒2动态生成toolbar.doc

extjs4.2 动态生成toolbar 目的 在 gridPanel中动态生成带按钮及查询条件的工具栏，看效果图： 实现 1.视图层 store : system.TuserStore, initComponent : function(){ 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 }]; this.callParent(arguments); } 2.Toolbar.js /** * @Description 工具栏 视图层 * @author 张川(c163.com) */ Ext.define(Ext.zc.grid.Toolbar,{ extend : Ext.toolbar.Toolbar, alias : widget.zc_grid_Toolbar,//视图别名 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); } }); } }); } } }); 3.后台调用创建工具栏的方法,这里可以再做页面维护，不建议在后台编写前台的相关代码，具体实现略...... /** * 获取工具栏 * */ public void getToolbar(){ (into getToolbar...); ListMapString,Object params = new ArrayListMapString,Object(); MapString,Object account_text = new HashMapString, Object(); account_text.put(xtype, text); account_text.put(text, 帐号:); MapString,Object account = new HashMapString, Object(); account.put(xtype, textfield); account.put(name, account); MapString,Object actType_text = new HashMapString, Object(); actType_text.put(xtype, text); actType_text.put(text, 操作类型:); MapString,Object actType = new HashMapString, Object(); actType.put(xtype, view_log_TsyslogActTypeView); actType.put(name, actType); MapString,Object beginTime_text = new HashMapString, Object(); beginTime_text.put(xtype, text); beginTime_text.put(text, 操作时间:); MapString,Object beginTime = new HashMapSt