Develop Reference

Feeding the dataview from JsonStore

Feeding the viewdata from the jsonstore
I want to use a JsonStore to feed my dataview. currently with the code below, the store is empty in the dataview. For testing, I wrote some code in the controller before opening the window and I can
see that the restful service retrieves data - getActivitiesToRescueCallback --> responce.responseText.
How can I feed my dataview with the Jsonstore?
In th ViewController:
getActivitiesToRescueCallback : function(options, success, response) {
if (success)
var result = Ext.decode(response.responseText); // Here I am getting data
},
getActivitiesToRescue : function() {
Ext.Ajax.request({
url : '/test/json_p',
params : {
"params[]" : "RESCUE",
"respName" : "",
"method" : "GetActivities",
"format" : "json"
},
callback : 'getActivitiesToRescueCallback',
scope : this
});
},
**View**
Ext.define('Tuv.test.rescue.RescueView', {
extend : 'Ext.window.Window',
alias : 'widget.rescueview',
alias : 'controller.rescueview',
bind : {
title : '{rescueTexts.masseRescue}'
},
height : 400,
width : 600,
constrainHeader : true,
maximizable : true,
closeAction : "hide",
layout : 'card',
activeItem : 0,
items : [ {
xtype : 'panel',
title : 'check activities',
layout : 'hbox',
border : false,
layoutConfig : {
align : 'stretch'
},
tbar : [ {
xtype : "button",
text : "copy",
handler : function() {},
scope : this
} ],
items : [ {
autoScroll : true,
width : 150,
items : {
xtype : 'dataview',
listeners : {
'afterrender' : function(comp) {
console.log('Test');
},
scope : this
},
store : new Ext.data.JsonStore({
url : '/test/json_p',
baseParams : {
"params[]" : "RESCUE",
respName : "",
method : "GetActivities",
format : "json"
},
idProperty : 'ACT_ID',
fields : [ 'ACT_ID', '_ACT_TYPE', '_FIRST_FORM', 'PRUEFSTATUS', '_DEBUG', '_SYNC_STATUS', '_SYNC_STATUS2', 'EQART', 'INVNR', 'ZTSPRID', 'ANLAGE_ZTSPRID', 'ZTSPRIDT' ]
}),
itemSelector : 'tr.dataRow',
tpl : new Ext.XTemplate('<table id="dataRescueTable">' + '<tpl for=".">', '<tr class="dataRow"><td>' + '<span <tpl if="STATUS==50">style="font-weight: bold;color:green"</tpl>>{name}</span></td></tr>', '</tpl>', '</table>')
}
} ],
bbar : {
buttonAlign : 'right',
items : [ {
text : "next",
handler : function(button) {
},
scope : this
} ]
}
} ]
});

To load the store I had to call store.load() or adding autoLoad: true as a config to the store.

How to Call an Extjs store without creating an explicit instance of it

I have an application which has is its first page build with different component.I am creating a userStore instance on page load(main.js) I want to access userStore in my header to get the firstname of user and display it on the header section.
Ext.create('store.User', {
storeId : 'storeUser'
});
Ext.define('OnlineApp.view.Main', {
extend : 'Ext.panel.Panel',
xtype : 'app-main',
requires : [
'Ext.plugin.Viewport'
],
controller : 'main',
viewModel : 'main',
layout : 'border',
padding : '0 0 0 0',
bodyStyle : 'border:0',
items : [
{
xtype : 'appHeader',
region : 'north'
},
{
xtype : 'tabpanel',
region : 'center',
bodyPadding : 0,
id : 'contentPanel',
reference : 'contentPanel',
layout : 'card',
border : false,
scrollable : true,
tabBar : {
hidden : true
},
items : [
firstPage,
contentFrame,
],
},
{
xtype : 'footer',
region : 'south'
}
]
});
** This is a Header file where I am trying to use the store below. Not sure what could be the best way to call store without creating a instance.**
Ext.define('OnlineApp.view.Header', {
extend: 'Ext.container.Container',
xtype : 'appHeader',
id : 'main-header',
height : 100,
layout : {
type : 'hbox',
align : 'middle'
},
initComponent: function() {
this.items = [
{
xtype : 'container',
flex : .55,
layout : {
type: 'vbox',
align : 'right'
},
collapsible : false,
padding : 5,
items : [
{
xtype : 'container',
id : 'app-header-user',
ui : 'usp-plain-button',
layout : {
type : 'hbox',
align : 'center'
},
items : [
{
xtype : 'component',
html : 'Welcome, <b>' + Ext.getStore('storeUser').data.firstname + '</b>' **// I am trying to use the store getting fiest name as undefined.**
},
{
xtype : 'gear-menu'
}
]
},
}
];
this.callParent();
}
});

If we assume that you have correctly generated/defined store. You have Ext.define('store.User') somewhere. Otherwise you should use Ext.create('Ext.data.Store',{storeId: 'storeUser'});
So Ext.getStore('storeUser') is returning store object in your header view. You can't just use data.firstname on it. Because data property in the store is Ext.util.Collection.
If you want to get data from your store you should use:
Ext.getStore('storeUser').getAt(0).get('firstname')
Where 0 is the index of the record in your store.
Btw in your case I would recommend you to use Ext.Temaples you can check the official example here. Or here is quite OK example on the stackoverflow.

How to recreate columns (whole grid) based on column structure provided from server in Kendo-Grid?

I have the default view configuration for grid which is initialized when page is loading. Above the grid i have the dropdown menu which is containing predefined available views (which are representing vissible columns in grid).
Structure of predefined views is following:
"gridStructure" : {
"columns" : [ {
"id" : 6,
"position" : 12,
"title" : "Order archived",
"locked" : false,
"entityName" : null,
"width" : "auto",
"filterable" : {
"cell" : {
"dataTextField" : "archived",
"operator" : "eq"
}
}
}, {
"id" : 7,
"position" : 13,
"title" : "Creation time",
"locked" : false,
"entityName" : null,
"width" : "auto",
"filterable" : {
"cell" : {
"dataTextField" : "creationTime",
"operator" : "lte"
}
}
} ]
},
Question is:
Is possible destroy whole structure of the grid and set new to existing data which are holded in grid?
It means that i don't want to show/hide columns but recreate grid with new columns and old data.
How can i do it please?

Use the setOptions method of the Kendo UI grid.

Get row data in extjs on cell edit

I am creating a Extjs grid. In which most of the column is editable. what i need is if user change any column value on blur of that i will call my method do some calculation based on other column value.and replace the column value with calculated values.code is here.
var incomeTaxOverrideModel = new Ext.grid.ColumnModel([{
id : 'fromDate',
header : "From Date",
dataIndex : 'fromDate',
width : 80,
renderer : drenderer,
editor : this.fromDateEditor
}, {
id : 'toDate',
header : "To Date",
dataIndex : 'toDate',
width : 80,
renderer : drenderer,
editor : this.toDateEditor
}, {
id : 'rawTax',
header : "Raw Tax",
dataIndex : 'rawTax',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({"blur":this.calculateTaxForword}),
renderer : Gts.payItemRenderer()
}, {
id : 'surcharge',
header : "Surcharge",
dataIndex : 'surcharge',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'cess',
header : "Cess",
dataIndex : 'cess',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'totalTax',
header : "Total Tax",
dataIndex : 'totalTax',
width : 80,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'taxAmount',
header : "Taxable Income",
dataIndex : 'taxAmount',
width : 100,
align : 'right',
selectOnFocus : true,
editor : new Ext.form.NumberField({}),
renderer : Gts.payItemRenderer()
}, {
id : 'remarks',
header : "Remarks",
dataIndex : 'remarks',
width : 250,
editor : new Ext.form.TextField({})
}, {
id : 'modifiedDate',
header : "Modified On",
dataIndex : 'modifiedDate',
width : 100,
renderer : Ext.util.Format.dateRenderer('d M Y h:i:s A'),
width : 150
}
]);
this.itoGrid = new Ext.grid.EditorGridPanel({
store : this.itoStore,
cm : incomeTaxOverrideModel,
autoExpandColumn : 'remarks',
autoScroll : true,
containerScroll : true,
frame : false,
stripeRows : true,
width : 830,
height : 233,
clicksToEdit : 1,
layout : 'fit',
loadMask : true,
tbar : [this.addAction, this.deleteAction],
trackMouseOver : true
});
i created on method
calculateTaxForword :function(){
console.log(this.itoGrid)
//console.log(this.itoGrid.getStore().getModifiedRecords())
}
but its not coming anything.i have to calculate value based on raw tax.surcharge and cess so i need all the value in my method.how to do this any one please help

The CellEditing plugin has a beforeedit event that you can listen to:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing-event-beforeedit
This will give you access to things like:
Parameters
editor : Ext.grid.plugin.CellEditing
e : Object
An edit event with the following properties:
grid - The grid
record - The record being edited
field - The field name being edited
value - The value for the field being edited.
row - The grid table row
column - The grid Column defining the column that is being edited.
rowIdx - The row index that is being edited
colIdx - The column index that is being edited
cancel - Set this to true to cancel the edit or return false from your handler.
eOpts : Object - The options object passed to Ext.util.Observable.addListener.

Each column object has editingPlugin.activeRecord property with record itself.

How to add itemtap

I have a list and I cant get items in the list to be clickable. I have onItemDisclosure and that should work but it is not. I would like the whole row to be clickable but I cant seem to get anything to work.
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
Here is my full source code
Ext.ns("Course", "Course.stores");
Course = new Ext.Application({
defaultTarget : 'viewport',
name : 'Course',
launch : function() {
console.log('begin');
this.viewport = new Ext.Panel({
fullscreen : true,
dockedItems : [ {
title : 'Course Catalog',
xtype : 'toolbar',
ui : 'light',
dock : 'top'
} ],
layout : 'fit',
scroll : 'vertical',
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
singleSelect : true,
itemSelector : 'span.id',
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
} ],
flex : 1
});
}
});
Ext.regModel('Properties', {
fields : [ {
name : 'letter',
type : 'string'
}, {
name : 'course',
type : 'string'
} ]
});
Course.stores.Properties = new Ext.data.Store({
model : 'Properties',
sorters: 'letter',
getGroupString : function(record) {
return record.get('letter')[0];
},
proxy : {
type : 'ajax',
url : '../lib/course_catalog.php',
reader : {
type : 'json',
}
},
autoLoad : true
});

Try something like this:
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
listeners: {
scope : this,
itemtap : function(foo, bar, etc) {
doSomething...
}
} ],

The reason that taps are not being handled is because you are overriding the itemSelector config:
itemSelector : 'span.id',
You should not do this, as Ext.List expects it to be a certain internally-set value in order to handle events on items properly. Simply removing this from your config should make it start working.