store, window and grid in this form. I am want insert to grid value from store. On picture I am pointed what data I am want insert
Model:
Ext.onReady(function () {Ext.define('RRD',{ extend: 'Ext.data.Model',
fields: [
'data'
]
});
Store:
var myStore = Ext.create('Ext.data.Store', {
model: 'RRD',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/price/books',
reader: {
type: 'json',
root: 'data',
successProperty: 'status'
}
}
});
Table and window:
var myTable = Ext.create('Ext.grid.Panel', { store: myStore,
columns: [
{ text : 'Value', sortable : true, dataIndex: 'data', flex: 0, width: 100 },
],
height: 900,
width: 300,
title: 'Data'
});
var win = Ext.create('Ext.Window', { width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'RRD Table',
renderTo: Ext.getBody(),
layout: 'fit',
items: [myTable]
});
});
How insert this date to grid?
your reader should take the nesting of your JSON into account:
reader: {
type: 'json',
root: 'rawData.data',
successProperty: 'rawData.status'
}
and you should send in your status either true or false
Related
RowEditing with Combobox - changes (click row editing) shown "id",
should be displayed "displayField"
pic - i65.fastpic.ru/big/2014/0724/46/d7cef656f6d993bc17657486ba5b6b46.gif
when editing a row - to display the value of the field displayfield from storeServer
now displays dataindex from store
Ext.define('ModelLib', {
extend: 'Ext.data.Model',
fields: [
'trID',
'trName'
]
});
var storeServer = Ext.create('Ext.data.Store', {
autoDestroy: true,
model: 'ModelLib',
proxy: {
type: 'ajax',
api: {
read: '/api.php?lib=server&act=get'
},
reader: {
type: 'json',
root: 'fields',
idProperty: "trID"
}
},
sorters: [{
property: 'trID',
direction: 'ASC'
}]
});
storeServer.load();
Ext.define('ModelMainobjects', {
extend: 'Ext.data.Model',
fields: [
{name: 'trServerID', type: 'int'}
]
});
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
autoSync : true,
model: 'ModelMainobjects',
proxy: {
type: 'ajax',
api: {
read: '/api.php?lib=mainobjects&act=get',
update: '/api.php?lib=mainobjects&act=update'
},
reader: {
type: 'json',
root: 'fields',
idProperty: "trID"
},
writer: {
type: 'json'
}
},
sorters: [{
property: 'trID',
direction: 'ASC'
}]
});
store.load();
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
var rowRenderer = function(val) {
var rec = storeServer.findRecord('id', val);
return rec !== null ? rec.get("trName") : ''
};
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
header: 'Сервер',
dataIndex: 'trServerID',
renderer: rowRenderer,
editor: {
xtype: 'combobox',
store: storeServer,
queryMode: 'local',
displayField: 'trName',
valueField: 'trID'
}
}],
width: 600,
height: 400,
plugins: [rowEditing]
});
I have a basic gridpanel that is fed from a store with 600 records, but my paging toolbar only shows the first page, regardless of the pageSize config in the store. For example...
When pageSize = 50, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 50 of 50
When pageSize = 100, the paging toolbar reads:
Page 1 of 1 | Displaying 1 - 100 of 100
Thoughts? Source below.
employee_store.js
var empUrlRoot = 'http://extjsinaction.com/crud.php'
+ '?model=Employee&method=';
//Instantiate employee store
var employeeStore = Ext.create('Ext.data.Store', {
model: 'Employee',
pageSize: 50,
proxy: {
type: 'jsonp',
api: {
create: empUrlRoot + 'CREATE',
read: empUrlRoot + 'READ',
udpate: empUrlRoot + 'UPDATE',
destroy: empUrlRoot + 'DESTROY'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: true,
batch: false,
writeRecords: function(request, data){
request.jsonData = data;
return request;
}
}
}
});
gridpanel.js
Ext.onReady(function(){
// gridpanel column configurations
var columns = [
{
xtype: 'templatecolumn',
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 50,
resizable: false,
hidden: true,
// template renders id column blue:
tpl: '<span style="color: #0000FF;">{id}</span>'
},
{
header: 'Last Name',
dataIndex: 'lastName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'First Name',
dataIndex: 'firstName',
sortable: true,
hideable: false,
width: 100
},
{
header: 'Address',
dataIndex: 'street',
sortable: false,
flex: 1,
// template renders column with additional content:
tpl: '{street}<br />{city} {state}, {zip}'
}
];
// Configure the gridpanel paging toolbar
var pagingtoolbar = {
xtype: 'pagingtoolbar',
store: employeeStore,
dock: 'bottom',
displayInfo: true
};
// Create gridpanel
var grid = Ext.create('Ext.grid.Panel', {
xtype: 'grid',
columns: columns,
store: employeeStore,
loadMask: true,
selType: 'rowmodel',
singleSelect: true,
stripeRows: true,
dockedItems: [
pagingtoolbar
]
});
// Configure and create container for gridpanel
Ext.create('Ext.Window', {
height: 350,
width: 550,
border: false,
layout: 'fit',
items: grid //the gridpanel
}).show();
// Load the employeeStore
employeeStore.load();
});
employee_model.js
// Define employee model
Ext.define('Employee', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id',type: 'int'},
{name: 'departmentId', type: 'int' },
{name:'dateHired', type:'date', format:'Y-m-d'},
{name:'dateFired', type:'date', format:'Y-m-d'},
{name:'dob', type:'date', format: 'Y-m-d'},
'firstName',
'lastName',
'title',
'street',
'city',
'state',
'zip'
]
});
You have to return total record count.
reader: {
root : 'data',
totalProperty: 'total' // this is default, you can change it
}
Next in server response you need:
{
data : ['your data here'],
total : 2000
}
Ext.define('RouteSeqModel', {
extend: 'Ext.data.Model',
fields: [{name: '_id', type: 'number'}, {name: 'Route_Seq' , type: 'int'},'Location_Name','Location_ID','Route_ID']
});
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteSeqModel',
storeId: 'RouteSeqStore',
autoLoad: false,
sortInfo: { field: "Route_Seq", direction: "ASC" },
proxy: {
type: 'ajax',
url: 'get-routeseq.php',
api: {
create: 'insert-routeseq.php',
update: 'update-routeseq.php',
},
actionMethods: 'POST',
baseParams: {
_id : 0,
},
reader: {
type: 'json',
idProperty: '_id'
},
writer: {
type: 'json',
id: '_id'
}
}
});
Ext.define('MyApp.view.MyGridPanelRouteSeq', {
extend: 'Ext.grid.Panel',
id:'MyGridPanelRouteSeq',
alias: 'widget.mygridpanelrouteseq',
renderTo: Ext.getBody(),
height: window.innerHeight,
width: window.innerWidth/2,
title: 'Route Sequence Setting',
sortableColumns: false,
store: RouteSeqStore,
columns: [
{
xtype: 'gridcolumn',
width: 70,
dataIndex: 'Route_Seq',
text: 'Sequence'
},
{
xtype: 'gridcolumn',
width: 160,
dataIndex: 'Location_Name',
text: 'Location Name'
}]
})
Sequence is read the data from Route_Seq, but the column is still not sorting yet.
i have no idea how come the grid is still not sorting..why?
Where did you get sortInfo from? It's not a valid store config.
You want:
sorters: [{
property: 'Route_Seq',
direction: 'DESC'
}]
I'm kind of stuck with this thing. What I want to do is to give each bar on a sencha chart a different color. This is what I have so far:
And this is my code for it:
Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('Retail', {
fields: [
{name: 'id', type: 'string'},
{name: 'quantity', type: 'int'}
]
});
var retailStore = new Ext.data.JsonStore({
model: 'Retail',
proxy: {
type: 'ajax',
url: 'getData.php',
reader: {
type: 'json',
}
},
autoLoad: true
});
console.log(retailStore);
new Ext.chart.Panel({
id: 'chartCmp',
title: 'Stock Example',
fullscreen: true,
dockedItems: {
xtype: 'button',
iconCls: 'shuffle',
iconMask: true,
ui: 'plain',
dock: 'left'
},
items: {
cls: 'stock1',
theme: 'Demo',
legend: {
position: {
portrait: 'right',
landscape: 'top'
},
labelFont: '17px Arial'
},
interactions: [{
type: 'panzoom',
axes: {
left: {
maxZoom: 2
},
bottom: {
maxZoom: 4
}
}
}],
animate: false,
store: retailStore,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['quantity'],
title: 'Quantity'
}, {
type: 'Category',
position: 'left',
fields: ['id'],
title: 'Products'
}],
series: [{
type: 'bar',
axis: 'right',
xField: 'id',
yField: ['quantity'],
}]
}
});
}});
I know there should be some way to "cheat" the chart by adding an extra dimension to it, just as it is done here:
http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/Bar/
There each year represents a new product. I'd like to do the same with mine, each product representing a different dimension.
You can use the renderer function of a serie. You just have to change attributes.fill to the color you want for each bar. Here is an example : http://bl.ocks.org/3511876 and the code :
Ext.setup({
onReady: function() {
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
x: i,
y: parseInt(Math.random() * 100)
});
}
var colors = ['blue', 'yellow', 'red', 'green', 'gray'];
var store = new Ext.data.JsonStore({
fields: ['x', 'y'],
data: data
});
var chart = new Ext.chart.Chart({
store: store,
axes: [{
type: 'Category',
fields: ['x'],
position: 'left'
}, {
type: 'Numeric',
fields: ['y'],
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'x',
yField: 'y',
axis: 'bottom',
renderer: function(sprite, record, attributes, index, store) {
attributes.fill = colors[index%colors.length];
return attributes;
}
}]
});
new Ext.chart.Panel({
fullscreen: true,
chart: chart
});
chart.redraw();
}
});
I am trying to populate Ext JS 4 Grid with json data. Unfortunatelly no matter what i do it's still remains empty. The JS function is below:
function buildGrid() {
Ext.define('Contact', {
extend: 'Ext.data.Model',
fields: ['Id', 'Name', 'State', 'Age']
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
proxy: {
type: 'ajax',
url: 'GridData',
reader: {
type: 'json',
record: 'data',
totalProperty: 'total'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ text: "Name", flex: 1, width: 120, dataIndex: 'Name', sortable: true },
{ text: "State", width: 100, dataIndex: 'State', sortable: true },
{ text: "Age", width: 115, dataIndex: 'Age', sortable: true },
],
height: 210,
width: 600,
split: true,
renderTo: Ext.getBody()
}).show();
}
Ext.onReady(buildGrid);
The server responce is look like:
{"callback":"1307878654818","total":1,"data":[{"Id":"ac2bedf1-bb5c-46e0-ba50-a6628341ca25","Name":"Smith","State":"NU","Age":24}]}
so it looks ok. However the grid view is not showing the date.
Anyone can see what i am doing wrong?
You haven't specified the root property. Try
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}