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

Extjs GridFilter feature don't work

I'm working in a Ruby On Rails + Ext js app.. and I'm trying to show a grid with the filter feature but I can't I've been reading a lot of post and even the Sencha example page but I can't make it work.
Here is the live code.. a simple grid without the gridpanel working https://fiddle.sencha.com/#fiddle/3fh
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
filters : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});
Hope you guys can help me!

Replace filters: [filtersCfg], with features: [filtersCfg],, and remove this extra comma in dataIndex: 'concepto', which is likely to crash IE. It's important to note that the ExtJS file loader seems not to work in this fiddle (Type Error).

Thanks to #Wared for the Answer... The only thing to change in the original code is :
filters: [filtersCfg]
INTO features: [filtersCfg] now the code looks like:
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);
var store = Ext.create('Ext.data.Store', {
fields: [
{name: 'tipo', type: 'string'},
{name: 'concepto', type: 'string'},
{name: 'ingreso', type: 'int'},
{name: 'egreso', type: 'int'},
{name: 'por_alicuota', type: 'float'},
{name: 'fecha', type: 'string', dateFormat:'m/Y'}
] ,
data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}
],
})
var filtersCfg = {
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'tipo'
}, {
type: 'string',
dataIndex: 'concepto'
}]
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getElementById("leftPanel"),
store: store,
height: 300,
features : [filtersCfg],
title: "grid view",
columns: [
{
text: 'Pay',
sortable: true,
filterable: true,
dataIndex: 'tipo'
},
{
text: 'Concept',
sortable: true,
filterable: true,
dataIndex: 'concepto',
}]
});
Ext.onReady(function() {
Ext.QuickTips.init();
grid.render('content');
grid.show();
});

Ext.grid.ColumnModel appers a blank

hi this is my code for extjs i have added some parameters but when i run the code the o/p appears blank
Ext.onReady(function(){
Ext.QuickTips.init();
PresidentsDataStore = new Ext.data.Store({
id: 'PresidentsDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
baseParams:{task: "LISTING"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'IDpresident', type: 'int', mapping: 'IDpresident'},
{name: 'FirstName', type: 'string', mapping: 'firstname'},
{name: 'LastName', type: 'string', mapping: 'lastname'},
{name: 'IDparty', type: 'int', mapping: 'IDparty'},
{name: 'PartyName', type: 'string', mapping: 'name'},
]),
sortInfo:{field: 'IDpresident', direction: "ASC"}
});
PresidentsColumnModel = new Ext.grid.ColumnModel(
[{
header: '#',
readOnly: true,
dataIndex: 'IDpresident',
width: 50,
hidden: false
},{
header: 'First Name',
dataIndex: 'FirstName',
width: 150,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})
},{
header: 'Last Name',
dataIndex: 'LastName',
width: 150,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'ID party',
readOnly: true,
dataIndex: 'IDparty',
width: 50,
hidden: true // we don't necessarily want to see this...
},{
header: 'Party',
dataIndex: 'PartyName',
width: 150,
readOnly: true
}]
);
PresidentsColumnModel.defaultSortable= true;
PresidentListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'PresidentListingEditorGrid',
store: PresidentsDataStore, // the datastore is defined here
cm: PresidentsColumnModel, // the columnmodel is defined here
enableColLock:false,
clicksToEdit:1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true})
});
PresidentListingWindow = new Ext.Window({
id: 'PresidentListingWindow',
title: 'The Presidents of the USA',
closable:true,
width:700,
height:350,
plain:true,
layout: 'fit',
items: PresidentListingEditorGrid // We'll just put the grid in for now...
});
PresidentsDataStore.load(); // Load the data
PresidentListingWindow.show(); // Display our window
});
and this is my database.php file with hard coded values.
<?php
$cust[0]['IDpresident']=10;
$cust[0]['FirstName']='vinod';
$cust[0]['LastName']='kachare';
$cust[0]['IDparty']=123;
$cust[0]['PartyName']='xyz';
echo json_encode($cust);
?>
can you please tell me that where is the problem in php file as o/p appears to be blank

ExtJS store without url for TreePanel

Model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'product', type: 'string'},
// {name: 'active', type: 'string'},
{name: 'balance', type: 'string'}
]
});
Store:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
proxy: {
type: 'ajax',
url: 'treegrid.json'
},
folderSort: true
});
TreeGrid:
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn',
text: 'Ürün',
flex: 2,
sortable: true,
dataIndex: 'product'
},{
text: 'Bakiye',
flex: 1,
dataIndex: 'balance',
sortable: true
}]
});
this.add(tree);
this.doLayout();
My Problem:
I'm able to load my treegrid with this url json store. But I want to load it with decoded json object which comes from the server. Something like below:
Store:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
root: inData,
folderSort: true
});
inData:
{"text":".",
"children":[
{"product":"Mevduat","balance":"15000","expanded":"true","children":[
{"product":"Vadesiz Mevduat","balance":"7000","expanded":"true","children":[
{"product":"Vadesiz Hesap","balance":"3500","leaf":"true"},
{"product":"fk Hesap","balance":"3500","leaf":"true"}
]
},
{"product":"Vadeli Mevduat","balance":"8000","expanded":"true","children":[
{"product":"Kirik Vadeli Hesap","balance":"3000","leaf":"true"},
{"product":"Birikimli Gelecek Hesabı","balance":"5000","leaf":"true"}
]}]
},
{"product":"Bireysel Krediler","balance":"40000","expanded":"true","children":[
{"product":"Konut Kredisi","balance":"15000","leaf":"true"},
{"product":"Arsa Kredisi","balance":"25000","leaf":"true"}
]
}]}
But if I use inData json object my tree panel doesn't display texts.

Use a memory proxy and the root config:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
proxy: {
type: 'memory'
},
root: inData,
folderSort: true
});

ext 4 beta - show multiple items in panel details view

I'm trying to adopt Ext for one of my small projects and got bit lost trying to implement the following: I have Orders and each will contain 1 or more PurchaseItem elements. I have built a grip that shows list of Orders and has a detailed view. How do I show details for each Order's PurchaseItem in detailed view?
Is there a way to loop through each in the OrderDetailsMarkup?
Here is my code below:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
var myDateFormat = "d/m/Y H:i";
Ext.onReady(function(){
Ext.define('Order',{
extend: 'Ext.data.Model',
fields: [
'date_created',
'status',
'name',
'phone',
'delivery_type',
'address',
'order_price'
]
});
var store = Ext.create('Ext.data.Store',{
model: 'Order',
proxy: {
type: 'ajax',
url: '/shopmng/json/list_of_orders/',
reader: 'json'
}
});
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{Date: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
{text: 'Status', width: 120, dataIndex: 'status', sortable: true},
{text: 'Name', width: 120, dataIndex: 'name', sortable: false},
{text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
{text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
{text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false},
{text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
],
viewConfig: {
forceFit: true
},
height: 400,
split: true,
region: 'north'
});
var OrderDetailsMarkup = [
'Some details<br />',
'status: {status}'
];
var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
Ext.create('Ext.Panel', {
renderTo: 'management_panel',
frame: true,
title: 'Manage Orders',
width: 1000,
height: 550,
layout: 'border',
items: [grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: 'background: #FFFFFF;',
html: 'select order to view details'
}]
});
grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
if (selectedRecord.length){
var detailPanel = Ext.getCmp('detailPanel');
OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
}
});
store.load();
});
Here is a sample of json that the grid deals with:
[
{
"status": "Новый заказ",
"delivery_type": "zazap",
"name": "Alexander Bolotnov",
"staff_comments": "",
"notes": "notes",
"external_order_ref": "",
"purchase_items": [
{
"picture_name": "Трава-мурава",
"printSize": "60 x 90 (без полей)",
"picture_id": 1,
"cost": "1972",
"price": "1972",
"quantity": 1,
"paperType": "Акварельная бумага"
}
],
"phone": "79264961710",
"order_price": "2072.00",
"address": "Moscow, Tvardovsky somewhere",
"date_created": "2011-04-17T00:12:33.048000",
"user_name": null,
"id": 1
},
{
"status": "Новый заказ",
"delivery_type": "boo!",
"name": "бишон",
"staff_comments": "",
"notes": "",
"external_order_ref": "",
"purchase_items": [
{
"picture_name": "Трава-мурава",
"printSize": "60 x 90 (без полей)",
"picture_id": 1,
"cost": "3944",
"price": "1972",
"quantity": 2,
"paperType": "Акварельная бумага"
}
],
"phone": "79264961710",
"order_price": "4044.00",
"address": "аааааааааааааааап, вапвапвап",
"date_created": "2011-04-18T23:13:27.652000",
"user_name": null,
"id": 2
}
]

i think your problem is your understanding about XTemplate. more info
in docs, there are some example how to use XTemplate (also how to use nested template)..
this is works for me...
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
var myDateFormat = "d/m/Y H:i";
Ext.onReady(function(){
Ext.define('Order',{
extend: 'Ext.data.Model',
fields: [
'date_created',
'status',
'name',
'phone',
'delivery_type',
'address',
'order_price',
'purchase_items' //add this if you try to manipulate it,
]
});
var store = Ext.create('Ext.data.Store',{
model: 'Order',
proxy: {
type: 'ajax',
url: 'order.json',
reader: 'json'
}
});
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
{text: 'Status', width: 120, dataIndex: 'status', sortable: true},
{text: 'Name', width: 120, dataIndex: 'name', sortable: false},
{text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
{text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
{text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false},
{text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
],
viewConfig: {
forceFit: true
},
height: 150,
split: true,
region: 'north'
});
/* i got error if use Ext.create
var OrderDetailsMarkup = [
'Some details<br />',
'status: {status}<br>',
'<tpl for="purchase_items">', //looping
'<hr>',
'{#}. {picture_name}',
'</tpl>'
];
var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
*/
var OrderTpl = new Ext.XTemplate(
'Some details<br />',
'status: {status}<br>',
'<tpl for="purchase_items">',// this is how to looping
'<hr>',
'{#}. {picture_name}',
'</tpl>'
);
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
frame: true,
title: 'Manage Orders',
width: 600,
height: 500,
layout: 'border',
items: [grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: 'background: #FFFFFF;',
html: 'select order to view details'
}]
});
grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
if (selectedRecord.length){
var detailPanel = Ext.getCmp('detailPanel');
OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
}
});
store.load();
});