Trying extjs5 simple gridpanel (example doesnt work)
Question
Im using this example to learn how to use extjs5, im creating a simple gridpanel, but doesnt work for me (in the example use the renderTo: Ext.getBody() , i changed this part to renderTo: 'example-grid' to show inside the <div id="example-grid"> but the div shows empty. Here is the code:
<head>
<html:base />
<title><bean:write name="UserFormBean" property="Nombre"/></title>
<link rel="stylesheet" href="../../../../config/ext-theme-classic/build/resources/ext-theme-classic-all.css" type="text/css" />
<link rel="stylesheet" href="../../../../config/ext-theme-classic/build/resources/ext-theme-classic-all-debug.css" type="text/css" />
<script src="../../../../config/js/ExtLocale/<%=request.getSession(true).getAttribute( "langSesion")%>"></script>
<script type="text/javascript" src="../../../../config/ext-theme-classic/build/ext-theme-classic.js"></script>
<script type="text/javascript" src="../../../../config/ext-theme-classic/build/ext-theme-classic-debug.js"></script>
<script type="text/javascript" src="../../../../config/js/ext-all-5.0.js"></script>
<script type="text/javascript" src="../../../../config/js/ext-all-debug-5.0.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
//MODEL
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
// DATASTORE
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
//GRIDPANEL
Ext.create('Ext.grid.Panel', {
renderTo: 'example-grid',
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email',
hidden: true
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
});
}
</script>
</head>
<body>
<div id="example-grid"></div>
2 answers
solution1
1 ACCPTED 2014-08-07 10:52:55
Your original code should work provided that you include necessary Ext files if you really need to use onReady approach (not recommended).
You can find a workable single-file approach here: Single File ExtJS 5 Application w/o Sencha Cmd . It is slightly different in that that it uses Ext.application() instead of onReady() . One way or another, both are not recommended.
The recommended approach is to use Sencha Cmd to initially generate, maintain during development and finally build the Ext application.
solution2
0 2014-08-07 09:09:51
This is how I have it done in my project :
var grid = Ext.create('Ext.grid.Panel', {..})
var pageDivs = Ext.select('div .example-grid');
//get the .Page DIV should just be one.
var pageDiv = pageDivs.elements[0];
grid.render(pageDiv);
ie. use render instead of renderTo .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.