PDA

View Full Version : regrding to autorefresh implementation



aomadevelopers
24 Aug 2009, 6:24 AM
Hi,
i have implemented the autorefresh function using ext.taskmanager.

this will automaticaly refresh my page every 30 seconds.

see my code

var selectionModel = new Ext.grid.CheckboxSelectionModel();
//This constructor have all the grid headers and its dataindex
SentGridPanel.superclass.constructor.call(this, {
loadMask: {
msg: 'Loading List...'
},
border: false,
viewConfig: {
forceFit: true,
emptyText: 'No sent item'
},
//single:true,
//delay:100,
bbar: pagingBar,
height: this.emailViewPort() - 230,
id: 'sentgrid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
sm: selectionModel,
cm: new Ext.grid.ColumnModel([selectionModel, {
header: "Subject",
dataIndex: 'DSubject',
sortable: true
},
{

header: "Recipients",
dataIndex: 'Receipt',
sortable: true
},
{
header: "No of files",
dataIndex: 'Fcount',
width :60,
sortable: true
},{
header: 'Status',
width:120,
//dataIndex: 'Sent'
//This function is to render an image,
renderer: function(value, cell, record) {
if (record.data['Sent']=='Completed') {
cell.attr ='style="background-color:#C7FFA1;"';
return "<span class='sucsess-status'>"+record.data['Sent']+"</span>";
}else if(record.data['Sent']=='In Progress'){
cell.attr ='style="background-color:#C3D4FF;"';
return "<span class='progres-status'>"+record.data['Sent']+"</span>";
}
else if(record.data['Sent']=='Pending'){
cell.attr ='style="background-color:#51d3d3;"';
return "<span class='pending-status'>"+record.data['Sent']+"</span>";
}else if(record.data['Sent']=='Failed'){
cell.attr ='style="background-color:#ff0000;"';
return "<span class='failure-status'>"+record.data['Sent']+"</span>";
}
else if(record.data['Sent']=='Completed [with Failure]'){
cell.attr ='style="background-color:#FEE7C0;"';
return "<span class='completed-failure-status'>"+record.data['Sent']+"</span>";
}
else if(record.data['Sent']=='Cancelled'){
cell.attr ='style="background-color:#ff0000;"';
return "<span class='cancel-status'>"+record.data['Sent']+"</span>";
}
else if(record.data['Sent']=='Deleted'){
cell.attr ='style="background-color:#F26300;"';
return "<span class='delete-status'>"+record.data['Sent']+"</span>";
}
else if(record.data['Sent']=='Activated'){
cell.attr ='style="background-color:#10742F;"';
return "<span class='activate-status'>"+record.data['Sent']+"</span>";
}
else if(record.data['Sent']=='Expired'){
cell.attr ='style="background-color:#959E9F;"';
return "<span class='expire-status'>"+record.data['Sent']+"</span>";
}else {
return "";
}
}
},
{
id: 'SENT',
header: "Sent Date",
dataIndex: 'Ddate',
renderer:formatDateValue,
sortable: true
},
{
id: 'EXPIRATION',
header: "Expiration Date",
dataIndex: 'Edate',
renderer:formatDate,
sortable:true
},

{
header: "Options",
align: 'center',
width: 165,
dataIndex: 'dummy',
menuDisabled: true,
cellActions: [{
iconIndex: 'ViewImage',
qtipIndex: 'ViewQtip'
},{
iconIndex: 'PreviewImage',
qtipIndex: 'Previewqtip'
},
{
iconIndex: 'ExportImage',
qtipIndex: 'Exportqtip'
},
{
iconIndex: 'ActiveImage',
qtipIndex: 'ActiveQtip'
},
{
iconIndex: 'ExpireImage',
qtipIndex: 'ExpireQtip'
},
{
iconIndex: 'CancelImage',
qtipIndex: 'CancelQtip'
},
{
iconIndex: 'DeleteImage',
qtipIndex: 'DeleteQtip'
}
]
}]
),
listeners : {
'render' : this.sentRefresh
},
plugins:[ this.cellActions]

});
this.getView().getRowClass = function(row, repeat, index, store) {
if (row.data['ExpireImage'] == 'icon-expire-disabled') {

return 'row-back-color-expire';
}
}

};

i have added this inside gridpanel.but this is my second page grid defination.
but when my first page get loaded this is also called and start rendering .

i have three pages in my application. iam adding those inside my panel

emailhelpwin.on('hide', this.unload, this);
var emailRightPanel = new Ext.Panel({
id: 'emailpanel',
columnWidth: .85,
//style: 'background-color:#ffffff;',
layout: 'card',
activeItem: 0,
autoScroll: true,
style: 'padding: 0 5px 2 2px',
items: [emailcompose, emailsent,viewWindow_new]
});

EmailPanel.superclass.constructor.call(this, {
layout: 'column',
id: 'AssetPanel',
border: false,
bodyStyle: 'padding: 10px 0px 0 0px;background-image: url(../img/bg.gif);background-repeat:repeat-x;',

items: [emailLeftPanel, emailRightPanel]
});
this.treePanel.on('click', this.treeNodeNavigation, this);

};
Ext.extend(EmailPanel, Ext.Panel, {
treeNodeNavigation: function (node) {
Ext.getCmp('emailpanel').getLayout().setActiveItem(node.id);

if ((firstCall == '1') && (node.id == '1')) {

this.sent.getStore().load({params: {start: 0,limit: 20,timeZone:timezone}});

firstCall = '2';
}
},


please let me know how to avoid that rendering



thanks in advance

jay@moduscreate.com
24 Aug 2009, 6:55 AM
Please post your code within code tags! Thanks in advance.

aomadevelopers
24 Aug 2009, 8:38 PM
Hi,
i have implemented the autorefresh

function using ext.taskmanager.

this will automaticaly refresh my page every 30 seconds.

see my code

var selectionModel = new Ext.grid.CheckboxSelectionModel();
//This constructor have all the grid headers and its dataindex
SentGridPanel.superclass.constructor.call(this, {
loadMask: {
msg: 'Loading List...'
},
border: false,
viewConfig: {
forceFit: true,
emptyText: 'No sent item'
},
//single:true,
//delay:100,
bbar: pagingBar,
height: this.emailViewPort() - 230,
id: 'sentgrid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
sm: selectionModel,
cm: new Ext.grid.ColumnModel([selectionModel, {
header: "Subject",
dataIndex: 'DSubject',
sortable: true
},
{
header: "Recipients",
dataIndex: 'Receipt',
sortable: true
},
{
header: "No of files",
dataIndex: 'Fcount',
width: 60,
sortable: true
},
{
header: 'Status',
width: 120,
//dataIndex: 'Sent'
//This function is to render an image,
renderer: function (value, cell, record) {
if (record.data['Sent'] == 'Completed') {
cell.attr = 'style="background-color:#C7FFA1;"';
return "<span class='sucsess-status'>" + record.data['Sent'] + "</span>";
} else if (record.data['Sent'] == 'In Progress') {
cell.attr = 'style="background-color:#C3D4FF;"';
return "<span class='progres-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Pending') {
cell.attr = 'style="background-color:#51d3d3;"';
return "<span class='pending-status'>" + record.data['Sent'] + "</span>";
} else if (record.data['Sent'] == 'Failed') {
cell.attr = 'style="background-color:#ff0000;"';
return "<span class='failure-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Completed [with Failure]') {
cell.attr = 'style="background-color:#FEE7C0;"';
return "<span class='completed-failure-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Cancelled') {
cell.attr = 'style="background-color:#ff0000;"';
return "<span class='cancel-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Deleted') {
cell.attr = 'style="background-color:#F26300;"';
return "<span class='delete-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Activated') {
cell.attr = 'style="background-color:#10742F;"';
return "<span class='activate-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Expired') {
cell.attr = 'style="background-color:#959E9F;"';
return "<span class='expire-status'>" + record.data['Sent'] + "</span>";
} else {
return "";
}
}
},
{
id: 'SENT',
header: "Sent Date",
dataIndex: 'Ddate',
renderer: formatDateValue,
sortable: true
},
{
id: 'EXPIRATION',
header: "Expiration Date",
dataIndex: 'Edate',
renderer: formatDate,
sortable: true
},
{
header: "Options",
align: 'center',
width: 165,
dataIndex: 'dummy',
menuDisabled: true,
cellActions: [{
iconIndex: 'ViewImage',
qtipIndex: 'ViewQtip'
},
{
iconIndex: 'PreviewImage',
qtipIndex: 'Previewqtip'
},
{
iconIndex: 'ExportImage',
qtipIndex: 'Exportqtip'
},
{
iconIndex: 'ActiveImage',
qtipIndex: 'ActiveQtip'
},
{
iconIndex: 'ExpireImage',
qtipIndex: 'ExpireQtip'
},
{
iconIndex: 'CancelImage',
qtipIndex: 'CancelQtip'
},
{
iconIndex: 'DeleteImage',
qtipIndex: 'DeleteQtip'
}]
}]),
listeners: {
'render': this.sentRefresh
},
plugins: [this.cellActions]
});
this.getView().getRowClass = function (row, repeat, index, store) {
if (row.data['ExpireImage'] == 'icon-expire-disabled') {
return 'row-back-color-expire';
}
}
};
i have added this inside gridpanel.but this is my second page grid defination.
but when my first page get loaded this is also called and start rendering.
i have three pages in my application.iam adding those inside my panel
emailhelpwin.on('hide', this.unload, this);
var emailRightPanel = new Ext.Panel({
id: 'emailpanel',
columnWidth: .85,
//style: 'background-color:#ffffff;',
layout: 'card',
activeItem: 0,
autoScroll: true,
style: 'padding: 0 5px 2 2px',
items: [emailcompose, emailsent, viewWindow_new]
});
EmailPanel.superclass.constructor.call(this, {
layout: 'column',
id: 'AssetPanel',
border: false,
bodyStyle: 'padding: 10px 0px 0 0px;background-image: url(../img/bg.gif);background-repeat:repeat-x;',
items: [emailLeftPanel, emailRightPanel]
});
this.treePanel.on('click', this.treeNodeNavigation, this);
};
Ext.extend(EmailPanel, Ext.Panel, {
treeNodeNavigation: function (node) {
Ext.getCmp('emailpanel').getLayout().setActiveItem(node.id);
if ((firstCall == '1') && (node.id == '1')) {
this.sent.getStore().load({
params: {
start: 0,
limit: 20,
timeZone: timezone
}
});
firstCall = '2';
}
},
please let me know how to avoid that rendering
thanks in advance

aomadevelopers
24 Aug 2009, 8:41 PM
hi,

i have used beautifier and did the alignment. but when i copied to the forum,automaticaly alignment was lost.

aomadevelopers
24 Aug 2009, 8:44 PM
Hi,
i have implemented the autorefresh
function using ext.taskmanager.
this will automaticaly refresh my page every 30 seconds.
see my code

var selectionModel = new Ext.grid.CheckboxSelectionModel();

//This constructor have all the grid headers and its dataindex
SentGridPanel.superclass.constructor.call(this, {
loadMask: {
msg: 'Loading List...'
},
border: false,
viewConfig: {
forceFit: true,
emptyText: 'No sent item'
},
//single:true,
//delay:100,
bbar: pagingBar,
height: this.emailViewPort() - 230,
id: 'sentgrid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
sm: selectionModel,
cm: new Ext.grid.ColumnModel([selectionModel, {
header: "Subject",
dataIndex: 'DSubject',
sortable: true
},
{
header: "Recipients",
dataIndex: 'Receipt',
sortable: true
},
{
header: "No of files",
dataIndex: 'Fcount',
width: 60,
sortable: true
},
{
header: 'Status',
width: 120,
//dataIndex: 'Sent'
//This function is to render an image,
renderer: function (value, cell, record) {
if (record.data['Sent'] == 'Completed') {
cell.attr = 'style="background-color:#C7FFA1;"';
return "<span class='sucsess-status'>" + record.data['Sent'] + "</span>";
} else if (record.data['Sent'] == 'In Progress') {
cell.attr = 'style="background-color:#C3D4FF;"';
return "<span class='progres-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Pending') {
cell.attr = 'style="background-color:#51d3d3;"';
return "<span class='pending-status'>" + record.data['Sent'] + "</span>";
} else if (record.data['Sent'] == 'Failed') {
cell.attr = 'style="background-color:#ff0000;"';
return "<span class='failure-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Completed [with Failure]') {
cell.attr = 'style="background-color:#FEE7C0;"';
return "<span class='completed-failure-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Cancelled') {
cell.attr = 'style="background-color:#ff0000;"';
return "<span class='cancel-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Deleted') {
cell.attr = 'style="background-color:#F26300;"';
return "<span class='delete-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Activated') {
cell.attr = 'style="background-color:#10742F;"';
return "<span class='activate-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Expired') {
cell.attr = 'style="background-color:#959E9F;"';
return "<span class='expire-status'>" + record.data['Sent'] + "</span>";
} else {
return "";
}
}
},
{
id: 'SENT',
header: "Sent Date",
dataIndex: 'Ddate',
renderer: formatDateValue,
sortable: true
},
{
id: 'EXPIRATION',
header: "Expiration Date",
dataIndex: 'Edate',
renderer: formatDate,
sortable: true
},
{
header: "Options",
align: 'center',
width: 165,
dataIndex: 'dummy',
menuDisabled: true,
cellActions: [{
iconIndex: 'ViewImage',
qtipIndex: 'ViewQtip'
},
{
iconIndex: 'PreviewImage',
qtipIndex: 'Previewqtip'
},
{
iconIndex: 'ExportImage',
qtipIndex: 'Exportqtip'
},
{
iconIndex: 'ActiveImage',
qtipIndex: 'ActiveQtip'
},
{
iconIndex: 'ExpireImage',
qtipIndex: 'ExpireQtip'
},
{
iconIndex: 'CancelImage',
qtipIndex: 'CancelQtip'
},
{
iconIndex: 'DeleteImage',
qtipIndex: 'DeleteQtip'
}]
}]),
listeners: {
'render': this.sentRefresh
},
plugins: [this.cellActions]
});

this.getView().getRowClass = function (row, repeat, index, store) {
if (row.data['ExpireImage'] == 'icon-expire-disabled') {
return 'row-back-color-expire';
}
}
};

i have added this inside gridpanel.but this is my second page grid defination.
but when my first page get loaded this is also called and start rendering.
i have three pages in my application.iam adding those inside my panel

emailhelpwin.on('hide', this.unload, this);

var emailRightPanel = new Ext.Panel({
id: 'emailpanel',
columnWidth: .85,
//style: 'background-color:#ffffff;',
layout: 'card',
activeItem: 0,
autoScroll: true,
style: 'padding: 0 5px 2 2px',
items: [emailcompose, emailsent, viewWindow_new]
});

EmailPanel.superclass.constructor.call(this, {
layout: 'column',
id: 'AssetPanel',
border: false,
bodyStyle: 'padding: 10px 0px 0 0px;background-image: url(../img/bg.gif);background-repeat:repeat-x;',
items: [emailLeftPanel, emailRightPanel]
});

this.treePanel.on('click', this.treeNodeNavigation, this);
};

Ext.extend(EmailPanel, Ext.Panel, {

treeNodeNavigation: function (node) {

Ext.getCmp('emailpanel').getLayout().setActiveItem(node.id);

if ((firstCall == '1') && (node.id == '1')) {
this.sent.getStore().load({
params: {
start: 0,
limit: 20,
timeZone: timezone
}
});
firstCall = '2';
}
},
please let me know how to avoid that rendering
thanks in advance

Animal
24 Aug 2009, 9:36 PM
Use
... tags.

aomadevelopers
25 Aug 2009, 6:29 AM
Hi,
i have implemented the autorefresh
function using ext.taskmanager.
this will automaticaly refresh my page every 30 seconds.
see my code



var selectionModel = new Ext.grid.CheckboxSelectionModel();

//This constructor have all the grid headers and its dataindex
SentGridPanel.superclass.constructor.call(this, {
loadMask: {
msg: 'Loading List...'
},
border: false,
viewConfig: {
forceFit: true,
emptyText: 'No sent item'
},
//single:true,
//delay:100,
bbar: pagingBar,
height: this.emailViewPort() - 230,
id: 'sentgrid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: false
}),
sm: selectionModel,
cm: new Ext.grid.ColumnModel([selectionModel, {
header: "Subject",
dataIndex: 'DSubject',
sortable: true
},
{
header: "Recipients",
dataIndex: 'Receipt',
sortable: true
},
{
header: "No of files",
dataIndex: 'Fcount',
width: 60,
sortable: true
},
{
header: 'Status',
width: 120,
//dataIndex: 'Sent'
//This function is to render an image,
renderer: function (value, cell, record) {
if (record.data['Sent'] == 'Completed') {
cell.attr = 'style="background-color:#C7FFA1;"';
return "<span class='sucsess-status'>" + record.data['Sent'] + "</span>";
} else if (record.data['Sent'] == 'In Progress') {
cell.attr = 'style="background-color:#C3D4FF;"';
return "<span class='progres-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Pending') {
cell.attr = 'style="background-color:#51d3d3;"';
return "<span class='pending-status'>" + record.data['Sent'] + "</span>";
} else if (record.data['Sent'] == 'Failed') {
cell.attr = 'style="background-color:#ff0000;"';
return "<span class='failure-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Completed [with Failure]') {
cell.attr = 'style="background-color:#FEE7C0;"';
return "<span class='completed-failure-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Cancelled') {
cell.attr = 'style="background-color:#ff0000;"';
return "<span class='cancel-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Deleted') {
cell.attr = 'style="background-color:#F26300;"';
return "<span class='delete-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Activated') {
cell.attr = 'style="background-color:#10742F;"';
return "<span class='activate-status'>" + record.data['Sent'] + "</span>";
}
else if (record.data['Sent'] == 'Expired') {
cell.attr = 'style="background-color:#959E9F;"';
return "<span class='expire-status'>" + record.data['Sent'] + "</span>";
} else {
return "";
}
}
},
{
id: 'SENT',
header: "Sent Date",
dataIndex: 'Ddate',
renderer: formatDateValue,
sortable: true
},
{
id: 'EXPIRATION',
header: "Expiration Date",
dataIndex: 'Edate',
renderer: formatDate,
sortable: true
},
{
header: "Options",
align: 'center',
width: 165,
dataIndex: 'dummy',
menuDisabled: true,
cellActions: [{
iconIndex: 'ViewImage',
qtipIndex: 'ViewQtip'
},
{
iconIndex: 'PreviewImage',
qtipIndex: 'Previewqtip'
},
{
iconIndex: 'ExportImage',
qtipIndex: 'Exportqtip'
},
{
iconIndex: 'ActiveImage',
qtipIndex: 'ActiveQtip'
},
{
iconIndex: 'ExpireImage',
qtipIndex: 'ExpireQtip'
},
{
iconIndex: 'CancelImage',
qtipIndex: 'CancelQtip'
},
{
iconIndex: 'DeleteImage',
qtipIndex: 'DeleteQtip'
}]
}]),
listeners: {
'render': this.sentRefresh
},
plugins: [this.cellActions]
});

this.getView().getRowClass = function (row, repeat, index, store) {
if (row.data['ExpireImage'] == 'icon-expire-disabled') {
return 'row-back-color-expire';
}
}
};


i have added this inside gridpanel.but this is my second page grid defination.
but when my first page get loaded this is also called and start rendering.
i have three pages in my application.iam adding those inside my panel



emailhelpwin.on('hide', this.unload, this);

var emailRightPanel = new Ext.Panel({
id: 'emailpanel',
columnWidth: .85,
//style: 'background-color:#ffffff;',
layout: 'card',
activeItem: 0,
autoScroll: true,
style: 'padding: 0 5px 2 2px',
items: [emailcompose, emailsent, viewWindow_new]
});

EmailPanel.superclass.constructor.call(this, {
layout: 'column',
id: 'AssetPanel',
border: false,
bodyStyle: 'padding: 10px 0px 0 0px;background-image: url(../img/bg.gif);background-repeat:repeat-x;',
items: [emailLeftPanel, emailRightPanel]
});

this.treePanel.on('click', this.treeNodeNavigation, this);
};

Ext.extend(EmailPanel, Ext.Panel, {

treeNodeNavigation: function (node) {

Ext.getCmp('emailpanel').getLayout().setActiveItem(node.id);

if ((firstCall == '1') && (node.id == '1')) {
this.sent.getStore().load({
params: {
start: 0,
limit: 20,
timeZone: timezone
}
});
firstCall = '2';
}
},



please let me know how to avoid that rendering
thanks in advance