Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    49
    Answers
    2
    Vote Rating
    0
    chaddjohnson is on a distinguished road

      0  

    Default Unanswered: How to make HTML render properly into ExtJS tabs?

    Unanswered: How to make HTML render properly into ExtJS tabs?


    I am developing a simple JavaScript-based plugin architecture which allows for any JavaScript control from any framework (jQueryUI, ExtJS, etc). to be plugged into and reused on any web page. My plugins below happen to use ExtJS.

    The first plugin renders fine in the first tab. However, since the second tab hasn't yet rendered when the page loads, the second plugin (also a grid) is first rendering to the document body, and then it renders properly (the HTMLElement/div is moved) inside the tab when the tab is selected. I'd like the plugin content to be hidden prior to rendering inside the tab. Also, when it it does render [when the tab is selected], horizontal scrollbars don't show unless I resize a column.

    Any ideas how to fix this? Here's a jsfiddle: http://jsfiddle.net/chaddjohnson/NVfRH/

    Ideas: use something other than contentEl; leverage various ExtJS config options; change my architecture.

    Here is the plugin code:

    Code:
    (function(MyNamespace) {
      var gridDataStore = ...
    
      MyNamespace.Plugin.Chart = MyNamespace.Plugin.extend({
        return {
          initialize: function() {
            // ...
          },
    
          render: function() {
            var stockGrid = Ext.create('Ext.grid.Panel', {
              autoRender: true,
              autoShow: true,
              store: gridDataStore,
              header: false,
              stateId: 'stateGrid',
              columns: [
                {text: 'Symbol',      width: 75,  sortable: true, dataIndex: 'symbol'},
                {text: 'Description', width: 200, sortable: true, dataIndex: 'description'},
                {text: 'Quantity',    width: 75,  sortable: true, dataIndex: 'quantity'},
                {text: 'Last Price',  width: 85,  sortable: true, dataIndex: 'last_price'}
              ],
              viewConfig: {
                stripeRows: true,
                enableTextSelection: true
              }
            });
    
            return stockGrid.getEl().dom;
          }
        };
      }
    })(MyNamespace);
    And here's code using the plugin:

    Code:
    var chart = new MyNamespace.Plugin.Chart();
    var anotherPlugin = new MyNamespace.Plugin.Another();
    
    var stocksWindow = Ext.create('Ext.Window', {
      title: 'Stocks',
      width: 600,
      height: 450,
      layout: 'fit',
      items: [
        Ext.create('Ext.tab.Panel', {
          activeTab: 0,
          items: [{
            title: 'Chart',
            autoScroll: true,
            contentEl: chartPlugin.render()  // RENDER FIRST PLUGIN IN FIRST TAB
          },{
            title: 'Something Else',
            autoScroll: true,
            contentEl: anotherPlugin.render()  // RENDER SECOND PLUGIN IN SECOND TAB
          }]
        })
      ]
    });
    I can add it to an invisible container, but it feels dirty doing so:

    Code:
    var container = document.createElement('div');
    document.getElementsByTagName('body')[0].appendChild(container);
    container.style.visibility = 'hidden';
    
    var stockGrid = Ext.create('Ext.grid.Panel', {
      ...
      renderTo: container
      ...
    });

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Location
    Enschede, The Netherlands
    Posts
    327
    Answers
    16
    Vote Rating
    13
    flanders will become famous soon enough

      0  

    Default


    I would recommend exploring what happens with deferredRender: true on the tab.Panel. It should make all the tabs render, even if not visible.

Thread Participants: 1