PDA

View Full Version : Getting Started Tutorial Issues



RRainey
11 Feb 2012, 3:12 PM
I am a newbie to EXT JS 4 and have been trying to use Designer 2 to get started.

Walking through the Getting Started - Car Listings example has me scratching my head. I got down to the section called, "Bind the Store data to Grid and Chart" and attaching CarDataJson to the Grid Panel. When I auto-columned a popup said "Unable to read columns - the assigned store has no model or fields defined."

I went to CarDataJson and attached the model "carDataModel" in the Component Config. I then was able to Auto Column without error.

Then the tutorial says, "Once this is done, actual store data should immediately display in the grid." But I am not getting any data. I tried on the Chart too with no luck.

I finished the tutorial to see if it would work on the live page but I have nothing showing in my browser and no javascript errors.

Any idea what am I doing wrong?

bharatn
11 Feb 2012, 7:16 PM
If your proxy(url) and reader are configured correctly, you should see 'Load data' context menu item enabled on the store. Click on that to load the data.

For running on browser make sure to set store 'autoLoad' to true if you arent manually loading the data.

RRainey
12 Feb 2012, 4:39 AM
Thanks, I found a few inconsistencies in working the Getting Started tutorial. It was overall very helpful but when you are trying to do step-by-step then those quirks can stump you.

After tying the model to CarDataJson then you have to go back to do the AutoColumn and then back to CarDataJson to Load the data. That was not intuitive to me yet.

Another quirk I found was needing to make the id on the chart to myChart instead of the default MyChart.

And the HTML Markup for "detail" needs to be put in a format it can be cut and pasted. I missed the fact that it not just text and I typed in what I saw. The car photos did not display until I corrected it.

Just hope this helps any other newbies complete the tutorial. I found downloading the carstore2.zip in the Completed Project Files link to be very helpful to solve these issues.

Thanks, great product and please keep the samples/tutorials coming so more of us can learn.

daniele.somma
25 Jun 2012, 3:12 AM
Good morning everyone.
I have the same problem when I press the button "Auto column" I get the error described. How can I fix it?
Hello and thank you.

w_goldman
26 Aug 2014, 5:47 PM
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Ext JS!</title>
<link rel="stylesheet" type="text/css" href="C:\tools\ext-4.2.0.663\resources\ext-theme-neptune\ext-theme-neptune-all.css">
<script type="text/javascript" src="C:\tools\ext-4.2.0.663\ext-all.js"></script>
<script type="text/javascript" src="C:\tools\ext-4.2.0.663\ext-theme-neptune.js"></script>


<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
here is my app.js
Ext.application({
name : 'MyApp',


launch : function() {


Ext.widget({
renderTo : Ext.getBody(),
xtype : 'grid',
title : 'Grid',
width : 650,
height : 300,
plugins : 'rowediting',
store : {
fields : [ 'name', 'age', 'votes', 'credits' ],
data : [
[ 'Bill', 35, 10, 427 ], [ 'Fred', 22, 4, 42 ]
]
},
columns: {
defaults: {
editor : 'numberfield',
width : 120
},
items: [
{ text: 'Name', dataIndex: 'name', flex: 1, editor: 'textfield' },
{ text: 'Age', dataIndex: 'age' },
{ text: 'Votes', dataIndex: 'votes' },
{ text: 'Credits', dataIndex: 'credits' }
]
}
})
}
});