1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    127
    Vote Rating
    0
    rblon is on a distinguished road

      0  

    Thumbs up [solved] combobox in pagingtoolbar not showing

    [solved] combobox in pagingtoolbar not showing


    I have a grid with pagingtoolbar which has a right-aligned combobox. And the grid itself is part of a portlet (see portal demo). This works fine, unless I initially have the portlet hidden. In that case, when I unhide the portlet, the combobox remains unvisible.

    I have adapted the portal demo to show this. Below is portal.js within bold the changes to get a show/hide button for the grid portlet

    Code:
    Ext.onReady(function(){
    
      // create some portlet tools using built in Ext tool ids
      var tools = [{
        id:'gear',
        handler: function(){
          Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
      },{
        id:'close',
        handler: function(e, target, panel){
          //panel.ownerCt.remove(panel, true);
          panel.hide();
        }
      }];
    
      var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
          region:'west',
          id:'west-panel',
          title:'West',
          split:true,
          width: 200,
          minSize: 175,
          maxSize: 400,
          collapsible: true,
          margins:'35 0 5 5',
          cmargins:'35 5 5 5',
          layout:'accordion',
          layoutConfig:{
            animate:true
          },
          items: [{
            html: Ext.example.shortBogusMarkup,
            title:'Navigation',
            autoScroll:true,
            border:false,
            iconCls:'nav'
          },{
            title:'Settings',
            html: Ext.example.shortBogusMarkup,
            border:false,
            autoScroll:true,
            iconCls:'settings'
          }]
        },{
          xtype:'portal',
          region:'center',
          margins:'35 5 5 0',
          items:[{
            columnWidth:.33,
            style:'padding:10px 0 10px 10px',
            items:[{
                id: 'grid-portlet',
                //hidden: true,
              title: 'Grid in a Portlet',
              layout:'fit',
              tools: tools,
              items: new SampleGrid([0, 2, 3])
            },{
              title: 'Another Panel 1',
              tools: tools,
              html: Ext.example.shortBogusMarkup
            }]
          },{
            columnWidth:.33,
            style:'padding:10px 0 10px 10px',
            items:[{
              title: 'Panel 2',
              tools: tools,
              html: Ext.example.shortBogusMarkup
            },{
              title: 'Another Panel 2',
              tools: tools,
              html: Ext.example.shortBogusMarkup
            }]
          },{
            columnWidth:.33,
            style:'padding:10px',
            items:[{
              title: 'Panel 3',
              tools: tools,
              html: Ext.example.shortBogusMarkup
            },{
              title: 'Another Panel 3',
              tools: tools,
              html: Ext.example.shortBogusMarkup
            }]
          }]
       }]
      });
        
      new Ext.Button({
        text: 'Show/Hide',
        handler: function() {
          var grid = Ext.getCmp('grid-portlet');
          grid.setVisible(!grid.isVisible());
        }
      }).render(Ext.getBody());
    });
    Further, I have changed sample-grid.js to add a pagingtoolbar with a right-aligned combobox. Changes again in bold (I have moved store initialization out of the constructor, not highlighted though).

    Code:
    SampleGrid = function(limitColumns){
    
      function italic(value) {
        return '<i>' + value + '</i>';
      }
    
      function change(val) {
        if(val > 0) {
          return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
          return '<span style="color:red;">' + val + '</span>';
        }
        return val;
      }
    
      function pctChange(val){
        if(val > 0){
          return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
          return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
      }
    
      var columns = [
        {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
        {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ];
    
      // allow samples to limit columns
      if(limitColumns){
        var cs = [];
        for(var i = 0, len = limitColumns.length; i < len; i++){
          cs.push(columns[limitColumns[i]]);
        }
        columns = cs;
      }
    
      var store = new Ext.data.Store({
        reader: new Ext.data.ArrayReader({}, [
          {name: 'company'},
          {name: 'price', type: 'float'},
          {name: 'change', type: 'float'},
          {name: 'pctChange', type: 'float'},
          {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]),
        data: [
          ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
          ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
          ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
          ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
          ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
          ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
          ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
          ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
          ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
          ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
          ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
          ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
          ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
          ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
          ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
          ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
          ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
          ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
          ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
          ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
          ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
          ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
          ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
          ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
          ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
          ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
          ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
          ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
          ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ]
      });
    
      var comboBox = new Ext.form.ComboBox({
        mode: 'local',
        store: new Ext.data.ArrayStore({
          fields: ['myId', 'displayText'],
          data: [[1, 'item1'], [2, 'item2']]
        }),
        valueField: 'myId',
        displayField: 'displayText',
        width: 70
      });
    
      var pagingToolbar = new Ext.PagingToolbar({
        store: store,
        pageSize: 100,
        items: [
          '->',
          comboBox
        ]
      });
    
      SampleGrid.superclass.constructor.call(this, {
        store: store,
         bbar: pagingToolbar,
        columns: columns,
        autoExpandColumn: 'company',
        height: 250,
        width: 600
      });
    }
    
    Ext.extend(SampleGrid, Ext.grid.GridPanel);
    This should work fine (at least if you have enough screenwidth, otherwise there might be not enough room for the standard pagingtoolbar items and the combobox).

    Now if you uncomment "hidden: true:" in portal.js, re-load and click the "Show/Hide" button, it will not show the combobox.

    Any thoughts on what is the problem would be much appreciated.

  2. #2
    Ext User
    Join Date
    Aug 2009
    Posts
    127
    Vote Rating
    0
    rblon is on a distinguished road

      0  

    Default


    aarghhh, only realize now it is similar to another problem I recently had. Changing hideMode is again the solution...

    Code:
      ...
      id: 'grid-portlet',
      hidden: true,
      hideMode: 'offsets',
      title: 'Grid in a Portlet',
      ...

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."