PDA

View Full Version : ExtJS hiding grid inside the layout issue



thirupaj
14 Mar 2013, 10:50 PM
I am using ExtJS version3 for UI development. And also i used extDesigner to make UI components.
I have taken one tab panel and created tabs for that ie: tab1, tab2, tab3.
Under tabs, I am displaying the content by using grid panel. It's working fine. But while page loads the panel width is 1152px(I think, It's window size for 22inch monitor). if we navigate one tab to another tab the width is varies to 1135px. Because of 1152 width grid contents are hiding inside layout towards far right.
I am trying to fix it. But i could not fix it till now. Please anyone can help me in this?
Your help will be highly appreciated !
Thanks.

mitchellsimoens
17 Mar 2013, 8:13 AM
Not seeing your code it's hard to help. Sounds like you aren't using layouts correctly.

thirupaj
18 Mar 2013, 12:50 AM
Here i have created tabpanel and also container for Files Content using extDesigner. I implemented code in FileTabPanel.js Please find the code below for both:

Below is the code to create tabpanel: TeamDetailsPanel.ui.js


TeamDetailsPanelUi = Ext.extend(Ext.TabPanel, {
id: 'teamDetailsPanel',
stateId: 'teamdetailspanelstate',
stateful: true,
autoHeight: true,
frame: true,
activeTab: 0,


initComponent: function() {
Ext.applyIf(this, {
items: [
{
xtype: 'generaltabpanel',
id: 'generalTab'
},
{
xtype: 'memberstabpanel',
id: 'membersTab',
autoHeight: true
},
{
xtype: 'burtspanel',
id: 'burtsTab'
},
{
xtype: 'dlspanel',
id: 'dlsTab'
},
{
xtype: 'filestabpanel',
id: 'filesTab'
},
{
xtype: 'reviewstabpanel',
id: 'reviewsTab'
},
{
xtype: 'reusetabpanel',
id: 'externalReuseTab'
},
{
xtype: 'dependenciestabpanel',
id: 'dependenciesTab'
},
{
xtype: 'doctabpanel',
id: 'docTab'
},
{
xtype: 'naclcontribtabpanel',
id: 'naclTab'
}
]
});


TeamDetailsPanelUi.superclass.initComponent.call(this);
}
});


Below is the code to Grid under Files Tab: It contains grid which is displaying json data: FilesTabPanel.js


FilesTabPanel = Ext.extend(FilesTabPanelUi, {
initComponent: function() {
FilesTabPanel.superclass.initComponent.call(this);


var teamDetailsPanel = Ext.getCmp('teamDetailsPanel');
var team_manager = teamDetailsPanel.nacre_team_manager;
var url_base = teamDetailsPanel.nacre_base_url;
var login = teamDetailsPanel.nacre_ppv_user;


var team_files_store = new Ext.data.Store({
url: url_base + 'webstore/Team::Files',
baseParams: {
login: login,
team_manager: team_manager,
start: 0,
limit: 30
},
remoteSort: true,
reader: new Ext.data.JsonReader({
idProperty: "id",
root: "items",
totalProperty: "count",
successProperty: "success",
fields: [
'id','path','branch','reviewed', 'filetype','last_updated_on',
{name: 'has_documentation', convert: convert_to_yes_no},
{name: 'reused', convert: convert_to_yes_no},
'fileowner',
'team',
'bu',
],
}),
listeners: {
exception: function(self, type, action, request, response){
Ext.Msg.alert('Error','Error loading data from server');
},
}
});


var files_mask;


// create the grid
var team_files_grid = new Ext.grid.GridPanel({
ref: 'gridTeamFiles',
store: team_files_store,
columns: [
{header: "Path", width: 200, dataIndex: 'path', sortable: true, id: 'path', renderer: renderFileColNoTarget, flex: 1},
{header: "Last Update", width: 50, dataIndex: 'last_updated_on', sortable: true},
{header: "Doc", width: 40, dataIndex: 'has_documentation', sortable: true, id: 'documented'},
{header: "Reused", width: 40, dataIndex: 'reused', sortable: true, id: 'reused'},
{header: "Reviewed", width: 50,dataIndex:'reviewed',sortable:true, id: 'reviewed'},
{header: "Type", width: 50,dataIndex:'filetype',sortable:true, id: 'filetype'},
{header: "Team", width: 50, dataIndex: 'team', sortable: true, id: 'team'},
{header: "BU", width: 80, dataIndex: 'bu', sortable: true, id: 'bu'},
],
viewConfig: {
forceFit:true,
scrollOffset: 0,
},
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 30,
store: team_files_store,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No files",
}),
cls: "auto-width-tab-strip",
stateful: false,
loadMask: true,
stripeRows:true,
title: 'No Owned Files',
autoExpandColumn: 'path',
autoHeight: true,
listeners: {
afterrender: function(){
if (!files_mask){
files_mask = new Ext.LoadMask(team_files_grid.getEl(), {msg:"Loading..."});
files_mask.show();
}
}
}
});
team_files_store.on('load', function( store ) {
var total_count = store.getTotalCount();
team_files_grid.setTitle( total_count + ' Owned Files');
if (typeof files_mask == 'object'){
files_mask.hide();
}
else{
files_mask = 1;
}
}
);
team_files_store.load();
this.add(team_files_grid);
}
});
Ext.reg('filestabpanel', FilesTabPanel);