Hi all,
I have a couple of problems with the extjs Livegrid extension.
1) The last row in my grid is not displayed correctly. Only half of it is visible. This problem occurs in Internet Explorer and Firefox. See image last_row_in_grid.jpg
2) When I open the Window which contains the grid for the first time, half of the grid is missing. When I close the window and open it again the grid is displayed correctly. This problem occurs only in Internet Explorer. See many_rows_are_missing.jpg
Unfortunately I can not provide you a working example of the Project.
Here are the codes for the window, grid generation.
Code:
function showSettingsAgents(){
var settingagentsWinNew89;
if(!Ext.getCmp('settingagentsWinNew89')){
settingagentsWinNew89 = new Ext.Window({
renderTo: Ext.getBody(),
resizable: false,
title: '<?php echo translate("18"); ?>',
autoScroll: false,
id: 'settingagentsWinNew89',
layout: 'absolute',
width: 1000,
height: 600,
minWidth: 1000,
minHeight: 600,
closeAction:'close',
plain: true,
constrainHeader: true,
shadow: false,
resizable:true,
minimizable: true,
tbar: [{
text: '<?php echo translate("46"); ?>',
icon: '/CorpImages/add2.png',
id: 'addAgentTab',
iconCls: 'new-win',
handler: function() {
var neuerAgentFenster;
if(!neuerAgentFenster) {
neuerAgentFenster = new Ext.Window({
renderTo: Ext.getBody(),
resizable: false,
title: '<?php echo translate("46"); ?>',
id: 'neuerAgentFenster',
autoScroll: true,
layout: 'absolute',
bodyStyle: 'formwindow',
width: 800,
height: 600,
closeAction:'close',
cls: 'white-body',
constrainHeader: true,
minimizable: true
});
Ext.getCmp('addAgentTab').setDisabled(true);
Ext.getCmp("neuerAgentFenster").load("editagent_new2.php?operation=add");
neuerAgentFenster.on('close', function() {
Ext.getCmp('agentsGrid').getStore().reload();
Ext.getCmp('addAgentTab').setDisabled(false);
});
neuerAgentFenster.taskButton = Ext.getCmp('TaskBarButtons').addButton(neuerAgentFenster, 'ux-taskbuttons-panel');
neuerAgentFenster.animateTarget = neuerAgentFenster.taskButton.el;
neuerAgentFenster.show();
Ext.getCmp('neuerAgentFenster').on({
'activate': {
fn: markActive
},
'beforeshow': {
fn: markActive
},
'deactivate': {
fn: markInactive
},
'minimize': {
fn: minimizeWin
},
'close': {
fn: removeWin
}
});
}
}
}]
});
settingagentsWinNew89.on('show', function (){
Ext.getCmp("settingagentsWinNew89").load({
url: "settingsagents_grid.php",
callback: function() {
SyncSizeNoTab(Ext.getCmp('settingagentsWinNew89'), 'agentsGrid', false, false, false);
}
});
});
}
settingagentsWinNew89.taskButton = Ext.getCmp('TaskBarButtons').addButton(settingagentsWinNew89, 'ux-taskbuttons-panel');
settingagentsWinNew89.animateTarget = settingagentsWinNew89.taskButton.el;
settingagentsWinNew89.show();
Ext.getCmp('settingagentsWinNew89').on({
'activate':{
fn: markActive
},
'beforeshow': {
fn: markActive
},
'deactivate': {
fn: markInactive
},
'minimize': {
fn: minimizeWin
},
'close': {
fn: removeWin
}
});
Ext.getCmp('settingagentsWinNew89').on('resize', function(window, width, heigth) {
SyncSizeNoTab(Ext.getCmp('settingagentsWinNew89'), 'agentsGrid', false, false, false);
});
}
Code:
<script type="text/javascript">
$("#agents_nodata").hide();
var clock = new Ext.menu.TextItem({id : 'clockid'});
Ext.namespace('Ext.ux');
Ext.ux.Livegrid = Ext.extend(Ext.ux.grid.livegrid.GridPanel, {
initComponent : function() {
var bufferedReader = new Ext.ux.grid.livegrid.JsonReader({
root: 'i',
versionProperty: 'version',
totalProperty: 'total_count',
id: 'id'
}, [ {
name: 'A_ID', sortType: 'string'
},{
name: 'A_Name', sortType: 'string'
},{
name: 'A_CallState', sortType: 'string'
}]);
this.store = new Ext.ux.grid.livegrid.Store({
autoLoad: true,
bufferSize: 300,
reader: bufferedReader,
sortInfo: {field: 'A_ID', direction: 'ASC'},
url: 'get_agents.php'
});
this.store.on('beforeload', function() {
$("#agentsgrid").hide();
$("#agents_waiting").show();
});
this.store.on('load', function() {
$("#agentsgrid").show();
$("#timebg2").css("visibility", "visible" );
$("#agents_waiting").hide();
var thisCount = this.getCount();
if (thisCount<1) {
$("#agentsgrid").hide();
$("#timebg2").css("visibility", "visible" );
$("#agents_nodata").show();
}
var clock = Ext.getCmp('clockid');
clock.getEl().update(new Date().format('d.m.Y H:i:s'));
});
this.selModel = new Ext.ux.grid.livegrid.RowSelectionModel();
this.view = new Ext.ux.grid.livegrid.GridView({
nearLimit: 100,
forceFit:true,
loadMask: {
msg: 'Please wait...'
}
});
this.bbar = new Ext.ux.grid.livegrid.Toolbar({
view: this.view,
displayInfo: false,
items: [clock, ' ']
});
Ext.ux.Livegrid.superclass.initComponent.call(this);
}
});
Ext.onReady(function(){
function transfer(val){
var fkt_name = "transferToAgent('" + val + "')";
return '<a href="#" onclick="'+fkt_name+'"><img src="../CorpImages/transfer_20px.png" alt="<?php echo translate("1921"); ?>" title="<?php echo translate("1921"); ?>"></a>';
}
var agentsgrid = new Ext.ux.Livegrid({
enableDragDrop: false,
stripeRows: true,
loadMask: true,
id :'agentsGrid',
height: 545,
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(
{header : '#', align: 'center', width: 40}
),
<?php
echo "{header: \"".translate("271")."\", align : 'left', width: 70, sortable: true, dataIndex: 'A_ID'},";// ID
echo "{header: \"".translate("652")."\", align : 'left', width: 85, sortable: true, dataIndex: 'A_Name'},";// Name
echo "{header: \"".translate("45")."\", align : 'left', width: 85, sortable: true, dataIndex: 'A_CallState'},";//Callstate
echo "{header: \"".translate("1896")."\", align : 'left', width: 85, sortable: true, renderer: transfer, dataIndex: 'A_ID'}";// Weiterleiten
?>
])
});
agentsgrid.render('agentsgrid');
});
</script>
<script type="text/javascript">
function transferToAgent(agent){
extmessagebox = Ext.Msg.show({
title:''
,progress: true
,closable : false
,msg: '<?php echo translate("1907")." '+agent+' ".translate("1906"); ?>'
,modal:true
});
var perc = 0;
function actionFunc() {
perc = perc + 0.2;
extmessagebox.updateProgress(perc,'');
if (perc <= 1) {
setTimeout(actionFunc, 1000);
} else {
Ext.Msg.hide();
Ext.Ajax.request({
url: 'transfer.php',
params: {
type: 'agent',
toagent: agent
},
method: 'POST',
success: function(xhr) {
Ext.MessageBox.show({
title: 'Status',
msg: 'Weiterleitung erfolgreich',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
},
failure: function() {
Ext.Msg.alert('Status', 'Ajax Request failure');
}
});
}
}
setTimeout(actionFunc, 1000);
}
</script>
<div id="agentsgrid"></div>
<div id="agents_waiting">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="285"> </td>
</tr>
<tr>
<td align="center"><img src="/CorpImages/large-loading.gif" width="32" height="32" /></td>
</tr>
<tr>
<td align="center" class="plaintext"><?php echo translate("1855"); ?></td>
</tr>
<tr>
<td height="285"> </td>
</tr>
</table>
</div>
<div id="agents_nodata">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="285"> </td>
</tr>
<tr>
<td align="center" class="plaintext"><?php echo translate("1859"); ?></td>
</tr>
<tr>
<td height="285"> </td>
</tr>
</table>
</div>
Livegrid render problems
Reply With Quote