PDA

View Full Version : VERY simple question. grid component



gigas01
12 Jul 2012, 7:55 PM
ah....isn't there are way to modify the title ?

it is my mistake :(

anyway help me with this plz.

it appears nothing just a blank.

i want to make a grid component.

---index.html---
<html>
<head>
<title>Hello Ext</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

---app.js-----
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
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: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});

gigas01
12 Jul 2012, 8:03 PM
Hello I'm a noob web dev.

Wanted to practice grid components.

But i don't know why it isn't working.

It is just a blank in my browser(ie,chrome)

the code is this. (acutally, i just copy-pasted it. but not working....:(

can you help me with this?

---index.html---
<html>
<head>
<title>Hello Ext</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

--app.js---
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
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: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});

gigas01
12 Jul 2012, 8:04 PM
Hello I'm a noob web dev.

Wanted to practice grid components.

But i don't know why it isn't working.

It is just a blank in my browser(ie,chrome)

the code is this. (acutally, i just copy-pasted it. but not working....:(

can you help me with this?

---index.html---
<html>
<head>
<title>Hello Ext</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

--app.js---
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
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: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});

evant
12 Jul 2012, 8:31 PM
What are you expecting it to display? You haven't hooked up any component to the store.

sword-it
12 Jul 2012, 9:59 PM
If you want to print a grid to you application then you must define a grid component in you app.js file.
Just add the below code to your app.js file:



Ext.create('Ext.grid.Panel', {
title: 'Grid Demo',
store: userStore, // the store that you have already created.
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});