PDA

View Full Version : ExtJS 4.0.7 Grid doesn't render row inside another panel



ljadrbln
20 Jan 2012, 2:23 PM
Hello,

I got a problem when I tried to use grid inside another panel

I have a basic Viewport component;
Item with region: 'center' is a TabPanel;
One of the tab is a grid panel.
This case works fine.

My next step is adding a few additional pamels to the tab.
So the structure for the TAB component became:


{
xtype: 'panel',
layout: {type: 'hbox', alighn: 'stretch'},
items: [
{xtype: 'panel', height: 100, ...},
{xtype: 'gridpanel', flex: 1, ...}
]
}

UI was render correctly, READ request sent and it return the correct dataset, but I can't see any row in the grid panel.

What wrong in this structure?

Thanks.

skirtle
20 Jan 2012, 7:07 PM
You've misspelt align.

Given the grid worked in a different location in the UI it seems likely this is just a layout issue.

Can you see the column headers and are they the correct width?

Inspect the page structure using Firebug or a similar tool. Check the HTML for the grid. There should be an HTML table containing the data. Is it there or not? It may have zero height.

ljadrbln
21 Jan 2012, 4:17 AM
Hello skirtle, thank you for your suggestion.

This is a code fo this component:


Ext.define('Marvin.view.job.List' ,{
extend: 'Ext.Panel',
layout: {
type:'vbox',
padding:'5',
align:'stretch'
},
alias: 'widget.jobsList',

//Predefined configuration
title: 'Listing Jobs',
store: 'Jobs',
models: ['Job'],

initComponent: function() {
Ext.apply(this, {
items: [
{xtype: 'panel', title: 'Test', height: 100, title: 'Filters list', collapsible: true, frame: true},
{xtype: 'splitter'},
{
xtype: 'gridpanel', flex: 1,
tbar: [
{text: 'Update Job', action: 'update'},
{xtype: 'tbseparator'},
{text: 'Delete Job', action: 'delete'}
],
columns: [
{header: 'id', dataIndex: 'id', flex: 1},
{header: 'client_id', dataIndex: 'client_id', flex: 1},
{header: 'name', dataIndex: 'name', flex: 1},
{header: 'seq_id', dataIndex: 'seq_id', flex: 1},
{header: 'run_after', dataIndex: 'run_after', flex: 1},
{header: 'target_url', dataIndex: 'target_url', flex: 1},
{header: 'completed', dataIndex: 'completed', flex: 1},
{header: 'suspended', dataIndex: 'suspended', flex: 1},
{header: 'visited_count', dataIndex: 'visited_count', flex: 1},
{header: 'seen_count', dataIndex: 'seen_count', flex: 1},
{header: 'last_visit_on', dataIndex: 'last_visit_on', flex: 1}
],
dockedItems: [
{xtype: 'pagingtoolbar', store: this.store, dock: 'bottom', pageSize: DEFAULT_ADMIN_PAGE_SIZE, displayInfo: true}
]
}
]
});
this.callParent(arguments);
}
});


And this is a result of this code:
30878

Everything works perfect when I'm using this config:


extend: 'Ext.grid.Panel',

and initComponent function is:



Ext.apply(this, {
tbar: [
{text: 'Update Job', action: 'update'},
{xtype: 'tbseparator'},
{text: 'Delete Job', action: 'delete'}
],
columns: [
{header: 'id', dataIndex: 'id', flex: 1},
{header: 'client_id', dataIndex: 'client_id', flex: 1},
{header: 'name', dataIndex: 'name', flex: 1},
{header: 'seq_id', dataIndex: 'seq_id', flex: 1},
{header: 'run_after', dataIndex: 'run_after', flex: 1},
{header: 'target_url', dataIndex: 'target_url', flex: 1},
{header: 'completed', dataIndex: 'completed', flex: 1},
{header: 'suspended', dataIndex: 'suspended', flex: 1},
{header: 'visited_count', dataIndex: 'visited_count', flex: 1},
{header: 'seen_count', dataIndex: 'seen_count', flex: 1},
{header: 'last_visit_on', dataIndex: 'last_visit_on', flex: 1}
],
dockedItems: [
{xtype: 'pagingtoolbar', store: this.store, dock: 'bottom', pageSize: DEFAULT_ADMIN_PAGE_SIZE, displayInfo: true}
]
});

skirtle
21 Jan 2012, 4:46 AM
It looks to me like you've got the store in the wrong place. It seems to be on the surrounding panel rather than the grid.

Please tidy up your indentation before posting code examples. The mixture of tabs and spaces makes it difficult to read. Personally I have my IDE configured to convert all tabs to spaces automatically.

ljadrbln
21 Jan 2012, 12:50 PM
Thank you for your fresh eyes, it was my bad.
I think that ExtJS should be more user firiendly for such situation, because firebug console was empty.