We Keep Coding

Data is not loading in ExtJS 3.4

My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?

I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.

Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well

What is wrong with this chart?

I have the following code to make the chart. But the graph display wrong.
Here is the code
Ext.onReady(function(){
Ext.define('FinancialRatio',{
extend: 'Ext.data.Model',
fields: ['year','revenue']
});
var FinancialRatioStore = Ext.create('Ext.data.Store',{
model: 'FinancialRatio',
autoLoad:true,
proxy:{
type: 'ajax',
url: 'http://localhost/FinancialRatio.php',
reader:{
type: 'xml',
record: 'ratio'
}
}
});
var revenue = Ext.create('Ext.Window',{
width: 400,
height:300,
renderTo: Ext.getBody(),
hidden: false,
maximizable: true,
title: 'Revenue',
layout: 'fit',
items:{
xtype: 'chart',
style: 'background:#fff',
store: FinancialRatioStore,
animate: true,
axes:[{
title: 'Revenue',
type: 'Numeric',
position: 'left',
fields: ['revenue']
},{
title: 'Year',
type: 'Category',
position: 'bottom',
fields: ['year']
}],
series:[{
type: 'line',
xField: 'year',
yField: 'revenue'
}]
}
});
And here is the result
But the actual data is as follow (I wrote the grid code to display this data)
Base on the data, the graph is displaying wrong. But I cant figure out where I did wrong. Could you please help me out?
Also, what is the differences between the "fields" in axes and the "xfield" and "yfield" in series?
Thank you

I'm guessing the issue is because you didn't set the field type in your model. Try this:
Ext.define('FinancialRatio',{
extend: 'Ext.data.Model',
fields: ['year', //when no type specified, it defaults to 'string'
{
name: 'revenue',
type: 'int'
}]
});
An axis can contain many fields so that you can plot multiple series against them. For example, if you wanted to plot revenue and profit, you would want to have axis fields ['revenue', 'profit'] and you would define multiple series:
series: [{
type: 'line',
xField: 'year',
yField: 'revenue'
}, {
type: 'line',
xField: 'year',
yField: 'profit'
}]

Ext JS tabpanel won't fit window size

Someone wants a panel done in Ext JS to dynamically fit the window size. I'm not familiar with Ext, but after hours of searching, I haven't found a working solution. Here is the code that is expected to be fixed:
var histotab = Ext.createWidget('tabpanel', {
activeTab: 0,
width : 2000,
height : "50%",
defaults :{
bodyPadding: 10
},
items: [
{
id: 'chartCmp',
title: 'By Year',
xtype: 'chart',
style: 'background:#fff',
layout:'fit',
animate: true,
shadow: true,
store:SOD.storeHistogram,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['countoffiles'],
label: {
font: '8px Arial'
},
Any suggestions are greatly appreciated.

Use the Ext.container.Viewport class with a fit layout. The viewport always sizes itself to the document view size.
Ext.widget('viewport', {
layout: 'fit',
items: {
xtype: 'tabpanel',
items: [{
title: 'Foo',
html: 'First tab'
}]
}
});

ExtJS Charts - Turning columns on and off

Im a little bit confused with ExtJS Charts.
I have created a Column Chart thats data looks like this
[
{'name':'Stu', 'score':10},
{'name':'Jack', 'score':50},
{'name':'Lily', 'score':100}
]
I have it working in the Chart, but I want to be able to turn each column off. I can display the legend but it takes all the data as one data set (which makes sense I guess).
How can I make each column be in the legend as a seperate item?
Thanks

You will not be able to to do this in simple bar or column chart
the way to go is Group chart
here i am giving you a sample code, run and see for yourself,hope it helps
Ext.onReady(function() {
Ext.define('testModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'Tom', type: 'int'},
{name: 'Bob', type: 'int'},
{name: 'Steve', type: 'int'},
{name: 'Eric', type: 'int'},
{name: 'Ed', type: 'int'},
]
});
var store = Ext.create('Ext.data.Store', {
model: 'testModel',
data: [{
'label':'Friends',
'Tom': '5',
'Bob': '7',
'Steve': '8',
'Eric': '9',
'Ed': '8'
}]
});
Ext.create('Ext.panel.Panel', {
height: 400,
width: 500,
frame: true,
renderTo: Ext.getBody(),
items: [{
height: 400,
width: 500,
xtype: 'chart',
store: store,
legend: {
position: 'right'
},
axes: [{
type: 'Category',
position: 'left',
fields: 'label',
title: 'Friends'
}, {
type: 'Numeric',
position: 'bottom',
fields: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
title: 'Hours of Sleep',
grid: true,
minimum: 0
}],
series: [{
showInLegend: true,
type: 'bar',
axis: 'bottom',
xField: 'label',
yField: ['Tom', 'Bob', 'Steve', 'Eric', 'Ed'],
}]
}]
});
});

extJs column layout issue

I have 3 extJs Windows. Each have some form control and then two tabs that display chart. Currently all windows appear at the same place and i have to drag them to make them stand in a row like this | | | . How can i create a 3 columns on screen and place each window in one of them. Please find the code of one of the window below. And yes i have seen this link
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html but it doesnt help my cause. None of the content is displayed if i create 3 column layout like the what's mentioned in the link. Please assume that all of windows have the same code and suggest a way. One more thing, i have closable, and maximizable feature in all of the windows.Thanks.
var win = Ext.create('Ext.Window', {
id: 'r1',
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
tbar: [{
xtype: 'combo',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: "label",
width: 20,
fieldLabel: text,
name: 'txt',
text: 'to'
}, {
xtype: 'combo',
id: 'c22devices',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
id: 'cl22devices',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: 'button',
text: 'Ok'
}],
items: [
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
}, {
xtype: 'tabpanel',
id: "tabs1",
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
items: [{
id: 'chartCmp1',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: storeRouge,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['date'],
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'date',
yField: 'total'
}]
}]
}, {
title: 'Table View',
xtype: 'grid',
id: "gridChart1",
width: 200,
height: 200,
collapsible: false,
store: storeRouge,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [{
text: 'Devices',
flex: 50,
dataIndex: 'date'
}, {
text: 'Pass',
flex: 50,
dataIndex: 'total'
}]
}]
}],
listeners: {
resize: function () {
Ext.getCmp("tabs1").setWidth(this.width);
Ext.getCmp("tabs1").setHeight(this.height);
Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
}
}
});

The problem is, the Ext.Window while being descendand of Ext.Panel does not abide by the rules of the layout like normal Ext.Panels do, it floats by itself and is constrained only by the limits of the DOM element they're rendered to (body by default).
This means that you'll have to jump some loops to position and layout the windows manually. You can also try to create some descendand class from Ext.WindowGroup to help you manage your windows and keep them nice and tidy.