表单面板在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();
答案 0 :(得分：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方法中将其销毁。并在grid的expandbody上调用grid的viewready事件中的方法并折叠body事件。