PDA

View Full Version : Can't paging and display image in gridpanel



Unlucky
11 Dec 2011, 11:52 PM
Hello guys, i woking with extjs 4.x but i cant paging, and display images in firefox8, but it display in chrome, ie9


Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'libExtJS/js/ux'); // set path for checkcolums


Ext.require([
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.panel.*',
'Ext.toolbar.Paging',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.ux.CheckColumn'
]);




// create the data store
var store = Ext.create('Ext.data.Store',{
idProperty: 'eventid',
remoteSort: true,
sorters: [{
property: 'eventid',
direction: 'ASC'
}],
fields: [
{
name: 'eventid',
type:'string'
},
{
name:'image',
type:'string'
},


{
name:'ename',
type: 'string'
},


{
name:'startregdate',
type: 'date',
dateFormat:'c'


},
{
name:'endregdate',
type: 'date',
dateFormat:'c'
},
{
name:'startdate',
type: 'date',
dateFormat:'c'
}
,
{
name:'enddate',
type: 'date',
dateFormat:'c'
}
,
{
name: 'minpart',
type: 'int'
},
'prize',
'description',
{
name: 'status',
type:'bool'
},


{
name:'postdate',
type: 'date',
dateFormat:'c'
}
],
proxy: {
type: 'ajax',
url: 'showAllEvent',
reader: {
type: 'json',
root: 'Events',
totalProperty: 'totalCount'
}
}
});


Ext.onReady(function(){
// define link image
function event_img(val){
return '<img width="110" height="90" src=../Resource/'+val+'>';
}
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
title: 'List Event',
columnLines: true,
loadMask:true,
store: store,
// create menu bar edit, block
tbar: [
{
itemId: 'editEvent',
text: 'Edit Event',
iconCls: 'icon_update',
handler : function() {


},
disabled: true // non click = disable
},


{
itemId: 'blockEvent',
text: 'Block Event',
iconCls: 'icon_block',
handler: function() {


},
disabled: true
}],
// listener for toolbar edit, block
listeners: {
'selectionchange': function(view, records) { // click, change row endable
grid.down('#blockEvent').setDisabled(!records.length);
grid.down('#editEvent').setDisabled(!records.length);
}
},
// define columns
columns: [{
id: 'eid',
header: "ID",
width: 30,
dataIndex: 'eventid',
align: 'center'
},
{
header: "Active?",
width: 45,
dataIndex: 'status',
xtype: 'checkcolumn',
align: 'center'
},
{
header: "Image",
width: 110,
dataIndex: 'image',
renderer: event_img,
align: 'center'
},
{
id: 'ename',
header: "Event Name",
width: 80,
dataIndex: 'ename',
align: 'center'
},
{
header: "Start Registration",
width: 100,
dataIndex: 'startregdate',
renderer : Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center'
},
{
header: "End Registration",
width: 100,
dataIndex: 'endregdate',
renderer : Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center'
},
{
header: "Start Date",
width: 90,
dataIndex: 'startdate',
renderer : Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center'
}
,{
header: "End Date",
width: 90,
dataIndex: 'enddate',
renderer: Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center'
},
{
header: "Min Participants",
width: 100,
dataIndex: 'minpart',
align: 'center'
},
{
header: "Prize",
width: 60,
dataIndex: 'prize',
align: 'center'
},
{
header: "Description",
width: 90,
dataIndex: 'description',
align: 'center'
},
{
header: "Post Date",
width: 100,
dataIndex: 'postdate',
renderer: Ext.util.Format.dateRenderer('m-d-Y'),
align: 'center'
}],
stripeRows: true,
height:420,
width:700,
frame:true,
// define bottom bar
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying events {0} - {1} of {2}',
emptyMsg: "No events to display"
})
});
// show
grid.render('event-list');
// load data
store.load();
});

help me please!!!!!!

mitchellsimoens
12 Dec 2011, 11:38 AM
Please post into the appropriate forum. I have moved this to the Ext JS 4 Q&A forum for you.