PDA

View Full Version : First row in grid panel is not visible



varun14
30 May 2012, 12:52 AM
Hi,
I have created grid panel .When the grid is rendered first record in the grid is always invisible irrespective of number of total records in the store.When I checked the json data received in firebug it displays correct number of records and its total count.But I don't get why its not showing the first record.

chramer
30 May 2012, 12:55 AM
show us the declaration of the grid and the response you get from the server

Farish
30 May 2012, 1:10 AM
It could be a problem with scrollbar. try clicking on the first record you see in the grid and move the selection up with the cursor up key. it may be the case that the record is there but just not visible on load.

varun14
30 May 2012, 1:17 AM
function showNewsArticleEditor()
{
Ext.define('newsmodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'categoryid',
type: 'string'
},
{
name: 'categoryname',
type: 'string'
},
{
name: 'number',
type: 'string'
},
{
name: 'title',
type: 'string'
},
{
name: 'startpublish',
type: 'string'
},
{
name: 'endpublish',
type: 'string'
},
{
name: 'createddate',
type: 'string'
},
{
name: 'createdbyid',
type: 'int'
},
{
name: 'officeid',
type: 'int'
},

{
name: 'office',
type: 'string'
},
{
name: 'contents',
type: 'string'
},
{
name: 'status',
type: 'int'
},
{
name: 'filename',
type: 'string'
}

]
});


var gridStoreNewsGrid = Ext.create('Ext.data.Store',
{
model: 'newsmodel',
id:'gridStoreNewsGrid',
proxy:
{
type: 'ajax',
url : 'controller.php?action=newsstore',
reader:
{
type: 'json',
root: 'records',
totalProperty:'totalCount'
}
},
autoLoad: true,
listeners:
{
load:function(store,records,success,operation,options)
{
var editButton=Ext.getCmp('editNews');
var removeButton=Ext.getCmp('removeNews');
var addButton=Ext.getCmp('addNews');
var submitButton=Ext.getCmp('submitNews');
getScreenLevelPrivilegesSpecialVersion(addButton,submitButton,editButton, removeButton);
}//end of load function
}//end of listener

});




sm=new Ext.selection.CheckboxModel( {
id:'checkBoxModelShowNewsArticles',
listeners:{
selectionchange: function(selectionModel, selected, options)
{
selectedRowsNews = selectionModel.getSelection();
if(southRegionExpandFlag==0 || selectedRowsNews.length>1)
{
var south_region = Ext.getCmp('center_south_id');
south_region.removeAll();
south_region.update();
south_region.setTitle('');
south_region.collapse();
}//end of if
}//end of selectionchange
}//end of listener
});



var gridNews = Ext.create('Ext.grid.Panel',
{
store: gridStoreNewsGrid,
id:'gridNews',
columns:
[
{
xtype: 'rownumberer',
header:'Sr.No.',
align:'center',
width: 40,
sortable: false
},
{
header: 'News Article Title',
align:'left',
dataIndex: 'title',
flex : 2
},
{
header: 'News Number',
dataIndex: 'number',
align:'center',
flex : 1
},
{
header: 'Start Publish Date',
dataIndex: 'startpublish',
align:'center',
flex : 1
},
{
header: 'End Publish Date',
dataIndex: 'endpublish',
align:'center',
flex : 1
},
{
xtype: 'actioncolumn',
header:'News Status',
align:'center',
dataIndex:'status',
flex:1,
renderer:renderIconNews
}
],
selModel:sm,
autoScroll:'auto',
border:false,
frame: false,
viewConfig:
{
stripeRows: true
},
columnLines:true,
tbar:
[
{
id:'addNews',
text: 'Add',
tooltip:'Add News.',
iconCls: 'addmodulemanager',
handler : function()
{
//some code goes here........
}//end of handler
},
{
id:'editNews',
text: 'Edit',
tooltip:'Edit News.',
iconCls: 'editmodulemanager',
handler : function()
{
//some code goes here........
}//end of handler
},{xtype:'tbspacer',width:10}, {xtype: 'tbseparator'},{xtype:'tbspacer',width:10},
{
id:'submitNews',
text: 'Submit',
tooltip:'Submit for approval.',
iconCls: 'submitbtn',
handler : function()
{
//some code goes here........
}//end of handler
}

],
listeners :
{
cellclick : function(grid, cell, cellIndex, record ,node , rowIndex , evt)
{
cellClickEventForNewsGrid();

}//end of event
}//end of listener
});

selectedRowsNews.length=0;
return gridNews;

}//end of function showNewsArticleEditor()






The response I got from server is,

{totalCount:2,records:[{"id":"1","categoryid":"5","categoryname":"g3","number":"pwd\/news\/2012\/01","title":"News title","startpublish":"30-05-2012","endpublish":"01-01-1970","createddate":"2012-05-30 12:46:07","createdbyid":"1","officeid":"3","office":"chief engineer pwd(national highway),shillong","contents":"application instanciation; namespaces;","status":"0","filename":"1_3_1.pdf,1,"},{"id":"1","categoryid":"10","categoryname":"b2","number":"pwd\/news\/2012","title":"Inaugaration","startpublish":"29-05-2012","endpublish":"29-05-2012","createddate":"2012-05-29 00:00:00","createdbyid":"1","officeid":"10","office":"mechanical circle,pwd(roads)","contents":"inauguration files attached.","status":"0","filename":"asdfasd,"}]}

Farish
30 May 2012, 1:21 AM
what is the height of your grid? change autoScroll to true. It should have a boolean value. here is a copy from the docs:

autoScroll (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.Component-cfg-autoScroll) : Boolean (http://docs.sencha.com/ext-js/4-0/#%21/api/Boolean)true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false to clip any overflowing content.

Defaults to: false

this could be causing the scrollbars to not show.

varun14
30 May 2012, 1:22 AM
Farish

I put only two records in the store for simplicity.So now I do not have any scroll bar.Also I have tried your solution by clicking single record but it doesn't work.

redraid
30 May 2012, 1:26 AM
You have duplicated records id, add idProperty: 'categoryid' to model if categoryid is record id

varun14
30 May 2012, 1:35 AM
No categoryid is not record id.

redraid
30 May 2012, 1:37 AM
You have 2 records with "id":"1" - record id must be unique.

varun14
30 May 2012, 1:48 AM
Thanks redraid that solved the problem.
Actually that "id":"1" in json for different use so i changed it to "articleid":"1" in json and all records are visible in grid.

Thanks again:)