Панель рендеринга внутри Extjs Grid Row Expander's rowBodyTpl

Question

Панель формы не отображается должным образом в строке строки Extjs rowexpander rowbodytpl.Trying для визуализации панели формы, но она не отображается должным образом. Лабиринты и текстовые поля отображаются правильно, но когда они используются внутри панели формы, они не отображается.

plugins:[ 
       { 
       ptype:'rowexpander', 
        rowBodyTpl:[ 
        '<div class="row-expander-ct" id="row-expander-ct"></div>' 
       ] 
       } 
       ] 

     grid.store.on({ 
      delay:1, 
      load:function() { 
       Ext.each(grid.el.query('.row-expander-ct'), function(ct) { 
     Ext.create('Ext.form.Panel',{ 
         title:'Form Panel', 
         //width:'100%', 
         //height:'100%', 
             cls:'testform', 
             bodyPadding:10, 
           //initComponent:function(){ 
            //var te=this; 
            //Ext.applyIf(this,{ 

             items:[ 

              { 
               xtype:'textfield', 
               fieldLabel:'Item', 
               name:'Item', 
               allowBlank:false, 
               itemId:'txtItem' 
              }, 
              { 
               xtype:'textfield', 
               fieldLabel:'Unit Cost', 
               name:'UnitCost', 
               allowBlank:false, 
               itemId:'txtUnitCost' 
              }, 
              { 
               xtype:'textfield', 
               fieldLabel:'Margins', 
               name:'Margins', 
               allowBlank:false, 
               itemId:'txtMargins' 
              }, 
              { 
               xtype:'textfield', 
               fieldLabel:'Unit Price', 
               name:'UnitPrice', 
               allowBlank:false, 
               itemId:'txtUnitPrice' 
              }, 
              { 
               xtype:'textfield', 
               fieldLabel:'Quantity', 
               name:'Quantity', 
               allowBlank:false, 
               itemId:'txtQuantity' 
              }, 
              { 
               xtype:'textfield', 
               fieldLabel:'Retail Price', 
               name:'RetailPrice', 
               allowBlank:false, 
               itemId:'txtRetailPrice' 
              }, 
             { 
              xtype:'button', 
              text:'Add', 
             id:'btnadd', 
              scope:this, 
             listeners:{ 
              click:function(button,e){ 
               alert('hi'); 
              } 
             } 
             }, 
             { 
              xtype:'button', 
              text:'Reset' 
             } 

             ], 
         renderTo:ct 
     //     
        }); 
       }); 
     } 
     }); 
     grid.store.load(); 

Answer 1

viewready:function(grid){ 
         grid.view.on('expandBody',function(rowNode, record, expandRow, eOpts){ 
          //console.log(record); 
          var store=grid.store; 
           var count=store.getCount(); 
          if(record.get('Id')!="-" && record.get('Id')!=count){ 
           displayInnerContent(record.get('Id'),record); 
          } 
          else{ 
           //var store=grid.store; 
           //var count=store.getCount(); 
           var emptyRecId=store.last(); 
          console.log(record); 
           displayInnerEmptyContent(count); 
          } 

         }); 

         grid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) { 
          destroyInnerContent(record); 
         }); 
        } 
function displayInnerContent(renderId,rec){ 
      //console.log(rec.get('Item')); 
      var innerForm=Ext.create('Ext.form.Panel',{ 
       title:'Form Panel', 
           cls:'testform', 
           bodyPadding:10, 
      renderTo:'row-'+renderId, 
         //initComponent:function(){ 
         // var te=this; 
         // Ext.applyIf(this,{ 

           items:[ 

            { 
             xtype:'textfield', 
             fieldLabel:'Item', 
             name:'Item', 
             allowBlank:false, 
             itemId:'txtItem', 
             value:rec.get('Item') 
            }, 
            { 
             xtype:'textfield', 
             fieldLabel:'Unit Cost', 
             name:'UnitCost', 
             allowBlank:false, 
             itemId:'txtUnitCost', 
             value:rec.get('UnitCost') 
            }, 
            { 
             xtype:'textfield', 
             fieldLabel:'Margins', 
             name:'Margins', 
             allowBlank:false, 
             itemId:'txtMargins', 
             value:rec.get('Margins') 
            }, 
            { 
             xtype:'textfield', 
             fieldLabel:'Unit Price', 
             name:'UnitPrice', 
             allowBlank:false, 
             itemId:'txtUnitPrice', 
             value:rec.get('UnitPrice') 
            }, 
            { 
             xtype:'textfield', 
             fieldLabel:'Quantity', 
             name:'Quantity', 
             allowBlank:false, 
             itemId:'txtQuantity', 
             value:rec.get('Quantity') 
            }, 
            { 
             xtype:'textfield', 
             fieldLabel:'Retail Price', 
             name:'RetailPrice', 
             allowBlank:false, 
             itemId:'txtRetailPrice', 
             value:rec.get('RetailPrice') 
            }, 
           { 
            xtype:'button', 
            text:'Add', 
           itemId:'btnadd', 
            //scope:this, 
           listeners:{ 
            afterrender:function(button){ 
            button.getEl().set({ 
            "data-id": renderId 
           }); 
            }, 
            click:function(button,e){ 
             var form=Ext.query('.testform'); 
             var store=Ext.getStore('TreeGridStore'); 
             console.log(button.el.dom.dataset.id); 
             var item=store.findRecord('Id',button.el.dom.dataset.id); 
            } 
           } 
           }, 
           { 
            xtype:'button', 
            itemId:'btnreset', 
            text:'Reset' 
           } 

           ] 
         // }); 

          //this.callParent(arguments); 
        // } 
      }); 

      innerForm.getEl().swallowEvent([ 
       'mousedown', 'mouseup', 'click', 
       'contextmenu', 'mouseover', 'mouseout', 
       'dblclick', 'mousemove' 
      ]); 
     } 
function destroyInnerContent(record) { 

    var parent = document.getElementById('row-'+record.get('Id')); 
    var child = parent.firstChild; 

    while (child) { 
     child.parentNode.removeChild(child); 
     child = child.nextSibling; 
    } 

} 

Здесь создают вид панели в displayInnerContent и уничтожить его в destroyInnerContent methods.and вызывать методы в viewready случае GRID на expandbody сетке и разрушаться события тела.