求助ExtJS，如何在Ext.grid.GridPanel上加一个toolbar或menu。

Question

本帖最后由 duyu1025 于 2011-04-28 21:01:07 编辑

Answer 1

既然是过滤,不用加文本框和button只要加一个组合框就可以实现过滤了.
你要过滤什么 ,下面代码是根据'标题'过滤的
Ext.onReady(function(){ 
            var data ;
            data = ${requestScope.s};
        var cm = new Ext.grid.ColumnModel(
                [
                   new Ext.grid.RowNumberer(),
                   {header:'标题',dataIndex:'title',sortable:true,width:document.body.clientWidth/10*5.4},
                   {header:'提问时间',dataIndex:'subDate',sortable:true,width:document.body.clientWidth/10*2},
                   {header:'提问者',dataIndex:'username',sortable:true,width:document.body.clientWidth/10},
                  {header:'类型',dataIndex:'type',width:document.body.clientWidth/10},
                  {header:'id',dataIndex:'id',width:document.body.clientWidth/10}
                ]
            );
        var store = new Ext.data.SimpleStore({
        proxy : new Ext.data.PagingMemoryProxy(data),
        fields: [
                   {name:'title'},
                 {name:'subDate'},
                 {name:'username'},
                 {name:'type'},
                 {name:'id'}
                ]
            });
        var bbar = new Ext.PagingToolbar(
               { 
              displayMsg:'显示第{0}条到第{1}条记录，一共{2}条',
              emptyMsg:'没有记录',
              beforePageText:'当前页码',
              afterPageText:'共{0}页',
              firstText:'第一页',
              prevText:'上一页',
              nextText:'下一页',
              lastText:'最后一页',
              refreshText:'刷新当前页',
              autoDestroy :true,
              autoWidth:true,
              autoHeight:true,
              pageSize:20,//一页显示几个
              store: store,
              displayInfo:true,
              bufferResize :true
              });
        
        var grid = new Ext.grid.GridPanel({
              viewConfig:
               {
                 columnsText: '列',
                 sortAscText: '升序',
                 sortDescText: '降序'
               },
                  loadMask :{msg:"数据加载中，请稍等"},//加载时有遮挡
                  frame: true,
                  frame:true,//有面板
                  columnLines:true,
                  height:480,
                  width:document.body.clientWidth,
                  border:false,
                  autoDestroy :true,
                  autoSizeColumns:true,
                  monitorResize:true,
                  store: store,
                  cm:cm,//字段
                  sm:new Ext.grid.RowSelectionModel(),
                  bbar:bbar,
                  tbar: [new Ext.form.ComboBox({
                      store: store,
                      mode: 'local',
                      emptyText:'这里输入过滤内容...',
                      displayField:'title'
                  })]
              });
           var id;
            grid.on('click',function(){
            id = grid.getSelectionModel().getSelected().get('id');
            location.href="http://www.baidu.com";
        
        });
            grid.render("div_list"); 
            store.load({params:{start:0, limit:20}});  
       });

Answer 2

tbar: [
                      {
                          xtype: "panel", border: false,
                          items: [new Ext.form.TwinTriggerField({
                              xtype: 'twintriggerfield', emptyText: "请输入...", name: "", width: 100,
                              trigger1Class: 'x-form-clear-trigger',
                              trigger2Class: 'x-form-search-trigger',
                              onTrigger1Click: function(e) {
                                  this.reset();
                              },
                              onTrigger2Click: function(e) {
                                  
                              }
                          }),{xtype:"button",text:"查询"}]
                      }
                ]

Answer 3

用 tbar , 在tbar 里面加上按钮,输入框都可以