ComboBox in GridPanel's tbar

**shanney** · 6 Apr 2010 5:44 PM

Hi all, I encountered this problem the other day and couldn't find any solutions. So here I am for some help.

I've got two gridpanels, one is on the page(say GridA), the other is on an Ext.window on the page(say Grid

.

they have the same tbar definition and combobox definition like below

tbar:[{
text:'type'
},typeCombo,{
text:'Query',
handler: function(){

}
}]

and the combobox's definition like this:

var indtypeCombo = new Ext.form.ComboBox({
id:'indtypeFilter',
hideMode:'offsets',
store: indtypeStore,
displayField: 'name',
valueField: 'code',
width:70,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
editable: false,
allowBlank:true
});

the two combobox have exactly same definition except for their ids. But they appear different. The GridA shows well, so does the combobox on the tbar. The other combobox on GridB's tbar doesn't.

In IE8, the down-arrow trigger button is 1 or 2 pix lower then the textfield, and the 'Query' button was covered by the trigger button about less then half of its body.
In ff, the down-arrow trigger button is fine, but the 'Query' button is completely covered by the combobox, acturally it's covered by the textfield,seems the 'Query' button is right next to the labelfield 'type' instead of the combobox.

on the page, GridA is on the center region of the viewport. GridB is on a panel in an Ext.window. the panel has a card-layout, and GridB is in the last card(items) of the panel.

I just can't get it. Where did I go wrong? Any suggestion is welcomed. Thanks in advance~~~~~~~

**jay@moduscreate.com** · 7 Apr 2010 12:07 PM

any way you can post your code?

**shanney** · 7 Apr 2010 5:59 PM

Originally Posted by jgarcia@tdg-i.com

any way you can post your code?

Thanks for your reply. It's ashame that my code is a little bit too much and hard to read. They're in about 5 js files. I'll try to cut off something unnecessary. Code will be put up a moment later.

**shanney** · 7 Apr 2010 6:06 PM

this is the js of the page, where GridPanel.grid is called GridA.

Code:

 

var URL = {
 queryData : 'indicatorInfoProvider.do',
 queryList : 'indicatorRelationListProvider.do',
 saveOrUpdate : 'baseRecordSave.do?bean=emcIndicatorDefinition&pk=indKey',
 deleteData : 'indicatorDeleteController.do',
 cancelCtg: 'indicatorCtgRelationCancel.do'
}
var store;
var GridPanel = {
 openWindow : null,
 
 grid: null,
 
 ctgKey: null,
 
 create : function(){
 
     var indicatorTypeStore = new Ext.data.SimpleStore({
  
   fields: ['code','name'],
   data: [[' ',' '],['0','BaseInd'],['1','ExtInd']]
  });
  
     var typeCombo = new Ext.form.ComboBox({
      id:'indicatorTypeFilter',
         store: indicatorTypeStore,//typeStore,
         displayField: 'name',
         valueField: 'code',
         typeAhead: true,
         mode: 'local',
         triggerAction: 'all',
         selectOnFocus: true,
         editable: false,
         allowBlank:true
     });
     
  store = new Ext.data.JsonStore({
   root: 'dataList',
            totalProperty: 'totalCount',
      url: URL.queryList,
      fields: [
                {name: EN[1], type: TY[1]},
                {name: EN[2], type: TY[2]},
                {name: EN[3], type: TY[3]},
         ]
  });
  store.setDefaultSort(EN[1]);
     
 
   var pagingToolbar = new Ext.ux.PagingToolbar(store);
     
  var csm = new Ext.grid.CheckboxSelectionModel({singleSelect: false});
 
     var grid = new Ext.grid.GridPanel({
      id:'indicatorGrid',
         store: store,
         sm: csm,
         enableDrag: true,
         columns: [
          new Ext.grid.RowNumberer(),
          csm,
             {header: CN[1], width: WD[1], sortable: true, dataIndex: EN[1], hidden: true, hideable: false},
             {header: CN[2], width: WD[2], sortable: true, dataIndex: EN[2]},
             {header: CN[3], width: WD[3], sortable: true, dataIndex: EN[3]},
         ],
         border: false,
         stripeRows: true,
         ddGroup:'TreeToolboxDD',
         anchor: '100% 100%',
   tbar: [{
              text: 'New',
              iconCls: 'dataTableList-add-icon',
              handler : function(){
      WinPanel.add();
              }
             },'-',{
              text: 'Delete',
              iconCls: 'dataTableList-delete-icon',
              handler : function(){
               var ids = '';
               var sign = true;
               var recordArray = csm.getSelections();
               for(var i=0;i < recordArray.length; i++) {
                sign = false;
                   ids += recordArray[i].get('indKey') + ',';
               }
               if(sign) {
                 Ext.Msg.alert('','Choose your records!');
                 return;
               }
               Ext.Msg.confirm('', 'Ready to delete?&nbsp;', function(val){
                if(val == 'yes'){
         Ext.Ajax.request({
           url: URL.deleteData,
           success: function(response) {
             for(var i = 0; i < recordArray.length; i++) {
                    //store.remove(recordArray[i]);
                    store.load({start:0,limit:pagingToolbar.pageSize,ctgKey: Ext.getCmp('indicatorGrid').ctgKey});
                   }
           },
           failure: Ext.emptyFn,
           params: { key: ids }
        });
                }
               })
              }
          },' ',{
     text: 'IndCode:'
             },{
     xtype:'textfield',
     id: 'queryIndId',
     width: 90
    },' ',{
     text: 'IndType'
    }, typeCombo,' ',{
              text: 'Query',
              iconCls: 'dataTable-preview-icon',
              handler : function(){
            store.load({params:{start:0, limit: pagingToolbar.pageSize, ctgKey: Ext.getCmp('indicatorGrid').ctgKey}});
              }
          }
         ],
         bbar: pagingToolbar,
         listeners: {
          move: function(c, x, y) {
           alert(c + ":" + x + ":" + y);
          }
         }
     });
     grid.render('grid-example');
     store.load({params:{start:0, limit: pagingToolbar.pageSize}});
    
     store.on('beforeload', function(options){
      var parms = '';
   var condition1 = 'indId:EXAMPLE_LIKE:' + $('queryIndId').value + ';';
   var condition2 = 'indType:EXAMPLE_LIKE:' + Ext.getCmp('indicatorTypeFilter').getValue() + ';';
   parms = condition1 + condition2;
      Ext.apply(this.baseParams, {condition: parms});
     });
     
     this.grid = grid;
 },
}
var addPanel;
var formPanel;
var WinPanel = {
 
 create : function() {
  
  var indicatorTypeStore = new Ext.data.SimpleStore({
  
   fields: ['code','name'],
   data: [['0','BaseInd'],['1','ExtInd']]
  });
  
     var typeCombo = new Ext.form.ComboBox({
      id:'indicatorType',
         store: indicatorTypeStore,//typeStore,
         name: EN[9],
         hiddenName: EN[9],
   fieldLabel: CN[9],
         displayField: 'name',
         valueField: 'code',
         typeAhead: true,
         mode: 'local',
         triggerAction: 'all',
         selectOnFocus: true,
         editable: false,
         allowBlank:false
     });
     //typeStore.load();
 
  formPanel = new Ext.FormPanel({
   id:'card-0',
   baseCls: 'x-plain',
         labelWidth: 75,
         frame:true,
         bodyStyle:'padding:10px 10px 10px 10px; border: 0px solid;',
         autoWidth: true,
   autoHeight: true,
         defaults: {width: 230},
         defaultType: 'textfield',
   bodyBorder: false,
   border: false,
         items: [
          {
           xtype: 'hidden',
     id: EN[1],
                 name: EN[1],
                 fieldLabel: CN[1],
     allowBlank:false
             },{
     id: EN[2],
                 name: EN[2],
                 fieldLabel: CN[2],
     allowBlank:false
             },{
     id: EN[3],
                 name: EN[3],
                 fieldLabel: CN[3],
     allowBlank:false
             }   
         ]
     });
 
     
     var navHandler = function(direction){
      var l = card.getLayout();
      var i = l.activeItem.id.split('card-')[1];
      
   var next = parseInt(i) + direction;
   l.setActiveItem(next);
   Ext.getCmp('move-prev').setDisabled(next==0);
   if(next==3){
    Ext.getCmp('move-next').setText('Finish');
   }else{
    Ext.getCmp('move-next').setText('Next');
   }
     }
     
     var card = new Ext.Panel({
      layout:'card',
      anchor:"100% 100%",
      activeItem: 0, // make sure the active item is set on the container config!
      defaults: {
          // applied to each contained panel
          border:false
      },
      bbar: ['->',// greedy spacer so that the buttons are aligned to each side
          {
              id: 'move-prev',
              text: 'Last',
              handler: navHandler.createDelegate(this, [-1]),
              disabled: true
          },{
              id: 'move-next',
              text: 'Next',
              handler: navHandler.createDelegate(this, [1])
          },{
           id: 'cancel',
           text: 'Cancel',
           handler: function(){
                       addPanel.hide();
                    }
          }
      ],
      items: [{
          id: 'card-3',
          layout: 'column',
          border:false,
          html: '<div id="indTypeDiv"></div>',
          items:[indGrid]//dropGrid,indRelationTree,indGrid
      }]
  });
     
  addPanel = new Ext.Window({
   el:'panel-example',
         layout:'fit',
         title: 'Add Info',
   width: 700,
         height: 500,
   resizable : false,
   items: card,
   closeAction: 'hide'
  });
 },
 
 add : function() {
  addPanel.show();
  Ext.getCmp('move-next').setText('Next');
 },
 
 modify : function(key) {
 
  Ext.Ajax.request({
     url: URL.queryData,
     success: function(response) {
       var data = response.responseText.evalJSON();
    addPanel.show();
    formPanel.getForm().setValues(data);
     },
     failure: Ext.emptyFn,
     params: { indKey: key }
  });
 } 
}
var Panel = {
 
 show : function() {
  Ext.QuickTips.init();
  GridPanel.create();
  WinPanel.create();
  
  
  var viewport = new Ext.Viewport({
   layout:'border',
   items:[{
    region:'west',
    contentEl:'west-div',
    width:300,
    layout:'anchor',
    items: [treePanel]
   },{
    region:'center',
    contentEl:'center-div',
    layout:'anchor',
    items:[GridPanel.grid]
   }]
  });
  
  
 }
}

**shanney** · 7 Apr 2010 6:09 PM

this is the code of the page, GridPanel.grid is what I call GridA.

Code:

 

var URL = {
 queryData : 'indicatorInfoProvider.do',
 queryList : 'indicatorRelationListProvider.do',
 saveOrUpdate : 'baseRecordSave.do?bean=emcIndicatorDefinition&pk=indKey',
 deleteData : 'indicatorDeleteController.do',
 cancelCtg: 'indicatorCtgRelationCancel.do'
}
var store;
var GridPanel = {
 openWindow : null,
 
 grid: null,
 
 ctgKey: null,
 
 create : function(){
 
     var indicatorTypeStore = new Ext.data.SimpleStore({
  
   fields: ['code','name'],
   data: [[' ',' '],['0','BaseInd'],['1','ExtInd']]
  });
  
     var typeCombo = new Ext.form.ComboBox({
      id:'indicatorTypeFilter',
         store: indicatorTypeStore,//typeStore,
         displayField: 'name',
         valueField: 'code',
         typeAhead: true,
         mode: 'local',
         triggerAction: 'all',
         selectOnFocus: true,
         editable: false,
         allowBlank:true
     });
     
  store = new Ext.data.JsonStore({
   root: 'dataList',
            totalProperty: 'totalCount',
      url: URL.queryList,
      fields: [
                {name: EN[1], type: TY[1]},
                {name: EN[2], type: TY[2]},
                {name: EN[3], type: TY[3]},
         ]
  });
  store.setDefaultSort(EN[1]);
     
 
   var pagingToolbar = new Ext.ux.PagingToolbar(store);
     
  var csm = new Ext.grid.CheckboxSelectionModel({singleSelect: false});
 
     var grid = new Ext.grid.GridPanel({
      id:'indicatorGrid',
         store: store,
         sm: csm,
         enableDrag: true,
         columns: [
          new Ext.grid.RowNumberer(),
          csm,
             {header: CN[1], width: WD[1], sortable: true, dataIndex: EN[1], hidden: true, hideable: false},
             {header: CN[2], width: WD[2], sortable: true, dataIndex: EN[2]},
             {header: CN[3], width: WD[3], sortable: true, dataIndex: EN[3]},
         ],
         border: false,
         stripeRows: true,
         ddGroup:'TreeToolboxDD',
         anchor: '100% 100%',
   tbar: [{
              text: 'New',
              iconCls: 'dataTableList-add-icon',
              handler : function(){
      WinPanel.add();
              }
             },'-',{
              text: 'Delete',
              iconCls: 'dataTableList-delete-icon',
              handler : function(){
               var ids = '';
               var sign = true;
               var recordArray = csm.getSelections();
               for(var i=0;i < recordArray.length; i++) {
                sign = false;
                   ids += recordArray[i].get('indKey') + ',';
               }
               if(sign) {
                 Ext.Msg.alert('','Choose your records!');
                 return;
               }
               Ext.Msg.confirm('', 'Ready to delete?&nbsp;', function(val){
                if(val == 'yes'){
         Ext.Ajax.request({
           url: URL.deleteData,
           success: function(response) {
             for(var i = 0; i < recordArray.length; i++) {
                    //store.remove(recordArray[i]);
                    store.load({start:0,limit:pagingToolbar.pageSize,ctgKey: Ext.getCmp('indicatorGrid').ctgKey});
                   }
           },
           failure: Ext.emptyFn,
           params: { key: ids }
        });
                }
               })
              }
          },' ',{
     text: 'IndCode:'
             },{
     xtype:'textfield',
     id: 'queryIndId',
     width: 90
    },' ',{
     text: 'IndType'
    }, typeCombo,' ',{
              text: 'Query',
              iconCls: 'dataTable-preview-icon',
              handler : function(){
            store.load({params:{start:0, limit: pagingToolbar.pageSize, ctgKey: Ext.getCmp('indicatorGrid').ctgKey}});
              }
          }
         ],
         bbar: pagingToolbar,
         listeners: {
          move: function(c, x, y) {
           alert(c + ":" + x + ":" + y);
          }
         }
     });
     grid.render('grid-example');
     store.load({params:{start:0, limit: pagingToolbar.pageSize}});
    
     store.on('beforeload', function(options){
      var parms = '';
   var condition1 = 'indId:EXAMPLE_LIKE:' + $('queryIndId').value + ';';
   var condition2 = 'indType:EXAMPLE_LIKE:' + Ext.getCmp('indicatorTypeFilter').getValue() + ';';
   parms = condition1 + condition2;
      Ext.apply(this.baseParams, {condition: parms});
     });
     
     this.grid = grid;
 },
}
var addPanel;
var formPanel;
var WinPanel = {
 
 create : function() {
  
  var indicatorTypeStore = new Ext.data.SimpleStore({
  
   fields: ['code','name'],
   data: [['0','BaseInd'],['1','ExtInd']]
  });
  
     var typeCombo = new Ext.form.ComboBox({
      id:'indicatorType',
         store: indicatorTypeStore,//typeStore,
         name: EN[9],
         hiddenName: EN[9],
   fieldLabel: CN[9],
         displayField: 'name',
         valueField: 'code',
         typeAhead: true,
         mode: 'local',
         triggerAction: 'all',
         selectOnFocus: true,
         editable: false,
         allowBlank:false
     });
     //typeStore.load();
 
  formPanel = new Ext.FormPanel({
   id:'card-0',
   baseCls: 'x-plain',
         labelWidth: 75,
         frame:true,
         bodyStyle:'padding:10px 10px 10px 10px; border: 0px solid;',
         autoWidth: true,
   autoHeight: true,
         defaults: {width: 230},
         defaultType: 'textfield',
   bodyBorder: false,
   border: false,
         items: [
          {
           xtype: 'hidden',
     id: EN[1],
                 name: EN[1],
                 fieldLabel: CN[1],
     allowBlank:false
             },{
     id: EN[2],
                 name: EN[2],
                 fieldLabel: CN[2],
     allowBlank:false
             },{
     id: EN[3],
                 name: EN[3],
                 fieldLabel: CN[3],
     allowBlank:false
             }   
         ]
     });
 
     
     var navHandler = function(direction){
      var l = card.getLayout();
      var i = l.activeItem.id.split('card-')[1];
      
   var next = parseInt(i) + direction;
   l.setActiveItem(next);
   Ext.getCmp('move-prev').setDisabled(next==0);
   if(next==3){
    Ext.getCmp('move-next').setText('Finish');
   }else{
    Ext.getCmp('move-next').setText('Next');
   }
     }
     
     var card = new Ext.Panel({
      layout:'card',
      anchor:"100% 100%",
      activeItem: 0, // make sure the active item is set on the container config!
      defaults: {
          // applied to each contained panel
          border:false
      },
      bbar: ['->',// greedy spacer so that the buttons are aligned to each side
          {
              id: 'move-prev',
              text: 'Last',
              handler: navHandler.createDelegate(this, [-1]),
              disabled: true
          },{
              id: 'move-next',
              text: 'Next',
              handler: navHandler.createDelegate(this, [1])
          },{
           id: 'cancel',
           text: 'Cancel',
           handler: function(){
                       addPanel.hide();
                    }
          }
      ],
      items: [{
          id: 'card-3',
          layout: 'column',
          border:false,
          html: '<div id="indTypeDiv"></div>',
          items:[indGrid]//dropGrid,indRelationTree,indGrid
      }]
  });
     
  addPanel = new Ext.Window({
   el:'panel-example',
         layout:'fit',
         title: 'Add Info',
   width: 700,
         height: 500,
   resizable : false,
   items: card,
   closeAction: 'hide'
  });
 },
 
 add : function() {
  addPanel.show();
  Ext.getCmp('move-next').setText('Next');
 },
 
 modify : function(key) {
 
  Ext.Ajax.request({
     url: URL.queryData,
     success: function(response) {
       var data = response.responseText.evalJSON();
    addPanel.show();
    formPanel.getForm().setValues(data);
     },
     failure: Ext.emptyFn,
     params: { indKey: key }
  });
 } 
}
var Panel = {
 
 show : function() {
  Ext.QuickTips.init();
  GridPanel.create();
  WinPanel.create();
  
  
  var viewport = new Ext.Viewport({
   layout:'border',
   items:[{
    region:'west',
    contentEl:'west-div',
    width:300,
    layout:'anchor',
    items: [treePanel]
   },{
    region:'center',
    contentEl:'center-div',
    layout:'anchor',
    items:[GridPanel.grid]
   }]
  });
  
  
 }
}

**shanney** · 7 Apr 2010 6:12 PM

this is the grid in the Ext.window. The indGrid is what I call GridB, and the indTypeCombo is the proplem I've met.

Code:

var indURL = {
 queryData : 'baseRecord.do?bean=emcIndicatorDefinition',
 queryList : 'indicatorListWOPagingProvider.do',
 saveOrUpdate : 'baseRecordSave.do?bean=emcIndicatorDefinition&pk=indKey',
 deleteData : 'baseRecordDelete.do?bean=emcIndicatorDefinition',
 cancelCtg: 'indicatorCtgRelationCancel.do'
}
var indStore = new Ext.data.JsonStore({
    url: indURL.queryList,
    fields: [
        {name: 'indKey', type: 'int'},
        {name: 'indId', type: 'string'},
        {name: 'indName', type: 'string'}
    ]
});
indStore.setDefaultSort('indId');
var indtypeStore = new Ext.data.SimpleStore({
 fields: ['code','name'],
 data: [[' ',' '],['0','BaseInd'],['1','ExtInd']]
});
var indtypeCombo = new Ext.form.ComboBox({
 id:'indtypeFilter',
 hideMode:'offsets',
    store: indtypeStore,//typeStore,
    displayField: 'name',
    valueField: 'code',
    width:70,
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    selectOnFocus: true,
    editable: false,
    allowBlank:true
});

var indCsm = new Ext.grid.CheckboxSelectionModel({});
var indGrid = new Ext.grid.GridPanel({
 id:'indGrid',
    store: indStore,
    layout:'fit',
    sm: indCsm,
    enableDrag: true,
    columns: [
     new Ext.grid.RowNumberer(),
     indCsm,
        {header: 'IndKey', width: 50, sortable: true, dataIndex: 'indKey', hidden: true, hideable: false},
        {header: 'IndCode', width: 100, sortable: true, dataIndex: 'indId'},
        {header: 'IndName', width: 150, sortable: true, dataIndex: 'indName'}
    ],
    border: false,
    stripeRows: true,
    ddGroup:'IndGridDD',
    columnWidth:.5,
    height:412,
    //anchor: '50% 100%',
 tbar: [{
   text: 'IndCode:'
        },{
   xtype:'textfield',
   id: 'indIdCondition',
   width: 70
  },' ',{
   text: 'IndType'
  }, indtypeCombo,'->',{
            text: 'Query',
            iconCls: 'dataTable-preview-icon',
            handler : function(){
             
          indStore.load({params:{ctgKey: Ext.getCmp('indGrid').ctgKey}});
            }
     }
    ],
    listeners: {
     move: function(c, x, y) {
      alert(c + ":" + x + ":" + y);
     }
    }
});

indStore.on('beforeload',function(options){
 
 var parms = '';
 var condition1 = '';
 if($('indIdCondition'))
  condition1 = 'indId:EXAMPLE_LIKE:' + $('indIdCondition').value + ';';
 var condition2 = 'indType:EXAMPLE_EQUALS:' + Ext.getCmp('indtypeFilter').getValue() + ';';
 parms = condition1 + condition2;
 Ext.apply(this.baseParams, {condition: parms});
});
indStore.load();

**shanney** · 7 Apr 2010 6:17 PM

Where is my previous post?
When I posted , I got the message that my post need to be approved by moderator....

ComboBox in GridPanel's tbar

Thread Tools

Search Thread

Display

ComboBox in GridPanel's tbar

ComboBox in GridPanel's tbar