PDA

View Full Version : grid in grid via expander plugin - grid head width not mach the row/cell width



bjt
9 Feb 2011, 11:06 AM
Hi,

please take a look to the image what i want to do and whats going wrong.

the following code build me the main grid and the grid in the expander and i dont know why the grid in the expander have the problem with the width in the cells




var main_stream_list_store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount'
}, [
{name: 'Id'},
{name: 'empf'},
{name: 'belegdat'},
{name: 'belegnr'},
{name: 'ampel_sort_bel'},
{name: 'vname'},
{name: 'vzusatz'},
{name: 'vstrasse'},
{name: 'vland'},
{name: 'vplz'},
{name: 'vort'},
{name: 'bemerkung'},
{name: 'vtel'},
{name: 'vmail'},
{name: 'erledigt'}
]),
proxy: new Ext.data.HttpProxy({
url: '/modules/belegliste/index.php'
,timeout:300000
}),
// sortInfo:{field: 'va_zip', direction: "desc"},
remoteSort:true,
// groupField:'empf',
autoLoad:false
});


var expander = new Ext.grid.RowExpander({
tpl : new Ext.Template('<div id="myrow-{Id}"></div>')
});

expander.on('expand', expandedRow);

function expandedRow(obj, record, body, rowIndex){





id = "myrow-" + record.json['Id'];
id2 = "mygrid-" + record.json['Id'];
id3 = "myP-" + record.json['Id'];
id4 = "myPBem-" + record.json['Id'];
var pX = new Ext.Panel({
style:'padding:5px;background:transparent;',
bodyStyle:'background:transparent;',
id:id3,
border:false,
items:[{
style:'float:left;background:transparent;',
bodyStyle:'background:transparent;',
border:false,
width:600,
html:'<table width="100%" border="0"><tr><td width="100"><u>Versandadresse:</u></td><td width="180"></td><td width="100"></td><td width="180" align="right"><u>Bemerkung:</u></td></tr><tr><td><b>Name:</b></td><td>'+record.json['vname']+'</td><td><b>Strasse:</b></td><td>'+record.json['vstrasse']+'</td></tr><tr><td><b>Zusatz:</b></td><td>'+record.json['vzusatz']+'</td><td><b>Plz:</b></td><td>'+record.json['vplz']+'</td></tr><tr><td><b>Telefon:</b></td><td>'+record.json['vtel']+'</td><td><b>Ort:</b></td><td>'+record.json['vort']+'</td></tr><tr><td><b>E-Mail:</b></td><td>'+record.json['vmail']+'</td><td><b>Land:</b></td><td>'+record.json['vland']+'</td></tr></table>'
},{
style:'float:left;background:transparent;',
bodyStyle:'background:transparent;',
width:200,
border:false,
items:[
{
xtype:'textarea',

width:200,
id:id4,
height:80,
value:record.json['bemerkung']
}
]
},{
xtype:'button',
text:'Speichern',
style:'float:left',
handler:function(){
Ext.Ajax.request({
waitMsg: 'Bitte warten...'
,url:'/modules/beleg_bemerkung/index.php'
,params:{'bem':Ext.getCmp(id4).getValue(),'id':record.json['Id']}
,failure:function(response,options){

},
success:function(response,options){
if(response.responseText == "failure"){
_mainInfoWin("FEHLER","<font color='red'>Die Bemerkung wurde NICHT erfolgreich gespeichert!</font>",5000);
}
if(response.responseText == "ok"){
_mainInfoWin("Gespeichert","Die Bemerkung wurde erfolgreich gespeichert!",5000);
}
}
});

}
}]
});


function cm2()
{
return new Ext.grid.ColumnModel([
{id:'idXX',header: "Position", sortable: true,dataIndex: 'posident'},
{header: "Artikelnummer", sortable: true, dataIndex: 'bestellnr'},
{header: "Bezeichnung", sortable: true, dataIndex: 'bezeichnung'},
{header: "Menge", sortable: true, dataIndex: 'menge'},
{header: "Erfasst am: ", sortable: true, dataIndex: 'lieferdatum'},
{header: "Status", sortable: true, dataIndex: 'status'},
{header: "geplante Anlieferung", sortable: true, dataIndex: 'anlieferung'},
{header: "Labeldruck", sortable: true, dataIndex: 'price'}
]);
}

var gridXStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount'
}, [
{name: 'Id'},
{name: 'posident'},
{name: 'bestellnr'},
{name: 'bezeichnung'},
{name: 'menge'},
{name: 'lieferdatum'},
{name: 'status'},
{name: 'anlieferung'}
]),
proxy: new Ext.data.HttpProxy({
url: '/modules/belegliste/getPosByBeleg.php?beleg='+record.json['belegnr']
,timeout:300000
}),
remoteSort:true,
autoLoad:true
});

var gridX = new Ext.grid.GridPanel({
store: gridXStore,
cm: cm2(),
viewConfig: {
loadMask: true,
forceFit:true,
autoFill:true,
autoExpandColumn: 'bestellnr'
},
autoHeight:true,
autoExpandColumn: 'bestellnr',
stripeRows:true,
loadMask: true,
autoFill:true,
border:false,
id: id2,
frame: false
,listeners:{
'render': function(e){
this.getView().refresh(false);
this.getView().refresh(true);
this.doLayout(true);
}
}
});

pX.render(id);

gridX.render(id);
gridX.getEl().swallowEvent([ 'mouseover', 'mousedown', 'click', 'dblclick' ]);


// gridX.getGridEl().setWidth(1365)
// gridX.getGridEl().setWidth("1485px");
// gridX.getView().scrollOffset = "1485px";
// gridX.getView().updateAllColumnWidths();
// gridX.doLayout();
// alert(gridX.getView().getOffsetWidth());
// alert(gridX.getView().getTotalWidth());
// alert(gridX.getView().getGridInnerWidth());

// updateAllColumnWidths
//getOffsetWidth
//getTotalWidth
//getGridInnerWidth
}



function showPrintWorker(idd){
new Ext.Window({
title:'Druckansicht',
height:600,
width:800,
modal:true,
html:'<iframe width="100%" height="100%" src="modules/printWorker/index.php?beleg='+base64_encode(idd)+'" frameborder="0"></iframe>'
}).show();
}

belegliste = new Ext.grid.GridPanel({
id:'belegliste_grid',
store: main_stream_list_store,
loadMask: true,
hidden:true,
clicksToEdit: 1,
stripeRows:true,
columns: [
expander,
{id:'Id',header: "Id", sortable: false, dataIndex: 'Id',hidden:true,groupable:false,hideable:false,resizable:false,menuDisabled:true},
{header: "Kommissionsname",sortable: true, dataIndex: 'empf', groupable:true,hideable:true,resizable:true,menuDisabled:false,renderer: function(v, params, record){ if(record.data.erledigt == 1){return "<font color='gray'>"+record.data.empf+"</font>"}else{return record.data.empf} }}, //,renderer: function(v, params, record){return '<div style="cursor:pointer;" onclick="document.location.href=\''+record.data.url+'\';" ><img src="/imgs/languages/'+record.data.lang+'.gif"> '+v+'</div><div style="visibility: hidden; overflow: hidden; height: 1px;"><a href="/?='+v+'">'+v+'</a></div>';}
{header: "Belegdatum",sortable: true, dataIndex: 'belegdat', groupable:true,hideable:true,resizable:true,menuDisabled:false,renderer: function(v, params, record){ if(record.data.erledigt == 1){return "<font color='gray'>"+record.data.belegdat+"</font>"}else{return record.data.belegdat} }}, //,renderer: function(v, params, record){return '<div style="cursor:pointer;" onclick="document.location.href=\''+record.data.url+'\';" ><img src="/imgs/languages/'+record.data.lang+'.gif"> '+v+'</div><div style="visibility: hidden; overflow: hidden; height: 1px;"><a href="/?='+v+'">'+v+'</a></div>';}
{header: "Belegnummer", sortable: true, dataIndex: 'belegnr', groupable:true,hideable:true,resizable:true,menuDisabled:false,renderer: function(v, params, record){ if(record.data.erledigt == 1){return "<font color='gray'>"+record.data.belegnr+"</font>"}else{return record.data.belegnr} }},
{header: "Bearbeitungsstatus", width: 30, sortable: true, dataIndex: 'ampel_sort_bel', groupable:false,hideable:true,resizable:false,menuDisabled:false,renderer: function(v, params, record){return '<center><img src="imgs/'+record.data.ampel_sort_bel+'.gif"></center>'}},
{header: "Drucken", width: 20, sortable: false, dataIndex: 'print', groupable:false,hideable:false,resizable:false,menuDisabled:true,renderer: function(v, params, record){return '<center><img src="imgs/icons/printer.png" style="cursor:pointer;" onclick="showPrintWorker('+record.data.belegnr+')"></center>'}}
],
view: new Ext.grid.GroupingView({
forceFit:true,
loadMask: true,
autoFill:true,
stripeRows:true,
autoExpandColumn: 'empf',
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Eintr&auml;ge" : "Eintrag"]})'
}),
plugins: expander,
frame:false,
border:false,
forceFit: true,
autoExpandColumn: 'release_title',
autoFill:true,
tbar:[
{
xtype:'textfield',
width:300,
id:'searchField',
emptyText:'Suchbegriff eingeben und Enter...',
listeners:{
'specialkey': function(field, e){
if (e.getKey() == e.ENTER) {
Ext.getCmp('belegliste_grid').getStore().setBaseParam('searcher',Ext.getCmp('searchField').getValue());
Ext.getCmp('belegliste_grid').getStore().load();
}
}
}
},{
xtype:'button',
iconCls:'cross',
tooltip:'Suchparameter entfernen',
handler:function(){
Ext.getCmp('belegliste_grid').getStore().removeAll();
Ext.getCmp('belegliste_grid').getStore().setBaseParam('searcher','empty');
Ext.getCmp('belegliste_grid').getStore().load();
Ext.getCmp('searchField').setValue();
}
},'-',{
xtype:'button',
text:'Standardsortierung/Ansicht wiederherstellen',
handler:function(){
Ext.getCmp('belegliste_grid').getStore().sortInfo = "{field:'',direction:''}";
Ext.getCmp('belegliste_grid').getStore().load();
}
},'-','Erledigte mit anzeigen?',
{
xtype:'checkbox',
id:'showErl',
handler:function(){
if(Ext.getCmp('showErl').checked == true){
Ext.getCmp('belegliste_grid').getStore().setBaseParam('erledigte','yes');
Ext.getCmp('belegliste_grid').getStore().load();
}else{
Ext.getCmp('belegliste_grid').getStore().setBaseParam('erledigte','no');
Ext.getCmp('belegliste_grid').getStore().load();
}
}
}
],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: main_stream_list_store,
displayInfo: true,
displayMsg: 'Zeige Eintr&auml;g(e) {0} - {1} von {2}',
emptyMsg: "Keine Eintr&auml;ge zum anzeigen",
id:'bottomPager'
,plugins:new Ext.ux.Andrie.pPageSize({
value:25,
idd:'bottomPagerSize'
})
})
});

belegliste.getView().on('refresh', function(){
Ext.each(belegliste.view.getRows(),function(row)
{
record = belegliste.store.getAt(row.rowIndex);
if (expander.state[record.id])
{
expander.expandRow(row);
}
});//each
});

function pageSizeUpdater(listSize,fromCombo){


if(listSize == "" || listSize== null){
listSize = 25;
}

// Ext.getCmp('topPagerSize').setValue(listSize);
Ext.getCmp('bottomPagerSize').setValue(listSize);


// Ext.getCmp('topPager').pageSize = parseInt(listSize);
Ext.getCmp('bottomPager').pageSize = parseInt(listSize);
// Ext.getCmp('topPager').updateInfo();
Ext.getCmp('bottomPager').updateInfo();

if(fromCombo == 1){
Ext.getCmp('belegliste_grid').getStore().setBaseParam('limit',listSize);
Ext.getCmp('belegliste_grid').getStore().setBaseParam('listWidth',listSize);
Ext.getCmp('belegliste_grid').getStore().load();
}else{
Ext.getCmp('belegliste_grid').getStore().setBaseParam('listWidth',listSize);
Ext.getCmp('belegliste_grid').getStore().setBaseParam('limit',listSize);
Ext.getCmp('belegliste_grid').getStore().load();
}
}