Hybrid View

  1. #1
    Ext User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    shanney is on a distinguished road

      0  

    Default ComboBox in GridPanel's tbar

    ComboBox in GridPanel's tbar


    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~~~~~~~

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    any way you can post your code?

  3. #3
    Ext User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    shanney is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    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.

  4. #4
    Ext User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    shanney is on a distinguished road

      0  

    Default


    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]
       }]
      });
      
      
     }
    }

  5. #5
    Ext User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    shanney is on a distinguished road

      0  

    Default


    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]
       }]
      });
      
      
     }
    }

  6. #6
    Ext User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    shanney is on a distinguished road

      0  

    Default


    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();

  7. #7
    Ext User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    shanney is on a distinguished road

      0  

    Default


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

Thread Participants: 1