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 show image in jsGrid from database using javaScript/JQuery/Hibernate/Spring?

I am trying to display image in the jsGrid from the database.I have tried below code.
.js code:
fields : [ {
title : "Currency Code",
name : "curr_code",
type : "text",
width : 35,
filtering : false,
editing : true,
align : "center"
},
.....
{
title : "Symbol",
name : "curr_symbol",
type : "text",
width : 35,
filtering : false,
editing : true,
align : "center"
},
{
type : "control",
editButton : true,
modeSwitchButton : true,
deleteButton : true,
width : 35
}
]
Grid View:
$.post('../../setupController/currencyGridView', function(obj) {
for (var i = 0; i < obj.length; i++) {
var currList = {
"curr_id" : obj[i].currency_id,
"curr_code" : obj[i].curr_code,
"curr_desc" : obj[i].curr_desc,
"curr_count" : obj[i].curr_country,
"curr_symbol" : obj[i].symbol,
}
$("#currencygrid").jsGrid("insertItem", currList).done(
function() {
});
}
});
Controller code:
#RequestMapping(value = "/currencyGridView", method = RequestMethod.POST)
#ResponseBody
public List<Currency> currencyGridView() {
List<Currency> currList = setupDao.currencyGridViewData();
return currList;
}
Now its showing output like this but not showing the image..

You can use itemTemplate. If you have image link you can do something like below
{
title: "Symbol",
type: "text",
width: 50,
itemTemplate: function(value, item) {
if(item.symbolId){
return '<img src="/img/"'+ item.symbolId + '" "width="42" height="42">';
}
return '';
}
}

Maybe you can override the itemTemplate function for that image column.
js
itemTemplate: function(value, item) {
return value;
},
Or do some custom row rendering : http://js-grid.com/demos/custom-row-renderer.html

JqGrid: Showing text for HTML elements inside column

I have used gridComplete to show HTML buttons but it shows the HTML text instead of button and encoded HTML as title which does not look good. Kindly help me remove or change the title (tooltip) and show the buttons
The Output
When I inspect this cell then I could see the following in chrome tools -
<td role="gridcell" style="" title="&lt;input type='button' value='Publish' onclick='publish(100)' /&gt;" aria-describedby="list_actionBtn"><input type='button' value='Publish' onclick='publish(100)' /></td>
The jqgrid Code
var myColModel = [ {
name : "promoId",
index : 'Promotionid',
width : 60
}, {
name : "promoCode",
index : 'promotioncode',
width : 110
}, {
name : "name",
index : 'name',
width : 160
}, {
name : "description",
index : 'description',
width : 250
}, {
name : "distCode",
index : 'distributor_code',
width : 110
} , {
name : "statusId",
hidden : true
} , {
name : "statusVal",
index : 'status',
width : 90
}, {
name : "startDate",
index : 'start_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "endDate",
index : 'end_date',
width : 100,
sorttype : "date",
align : "right"
}, {
name : "discount",
index : 'discount',
width : 80
}, {
name : "extension",
index : 'extension',
width : 80
}, {
name : "isDiscount",
hidden : true
}, {
name : "isExtension",
hidden : true
}, {
name : "actionBtn",
width : 100
} ];
$(function() {
$("#list")
.jqGrid(
{
url : '/suiactcodegen/action/promotion/promolist',
datatype : "json",
mtype : "GET",
colNames : [ "Promo ID", "Promo Code", "Name",
"Description", "Distributor Code", "Stt Id",
"Status", "Start Date", "End Date",
"Discount", "Extension", "Is Disc", "isExtn", "" ],
colModel : myColModel,
pager : "#pager",
rowNum : 10,
rowList : [ 10, 20, 30 ],
sortname : "end_date",
sortorder : "asc",
viewrecords : true,
gridview : true,
rownumber : true,
autoencode : true,
width : '1000px',
height : 'auto',
caption : "Promotion Summary",
gridComplete: function() {
var ids = $("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowId = ids[i],
statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
activeBtn = "";
if (statusId == 0) { // Inactive
activeBtn = "<input type='button' value='Publish' " +
"onclick='publish(" + rowId + ")' />";
}
//else if (statusId == 1) { // Published
// activeBtn = "<input type='button' value='Expire' " +
// "onclick=\"expire(" + rowId + ");\" />";
//}
$("#list").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
}
}
}).jqGrid('navGrid', '#pager', {
add : false,
edit : false,
del : false,
search : true,
refresh : false
}).jqGrid('navButtonAdd', '#pager', {
caption : " Edit ",
// buttonicon: "ui-icon-bookmark",
onClickButton : editPromo,
position : "last"
});
});
-- Update --
I have already tried autoencode = false for this column but it didn't work
IMP Update
The reason why it doesn't work I believe is because datatype is 'json' but button type is not json data type. How can I create it as a separate row? In case of 'local' data it works. See the fiddle http://jsfiddle.net/zpXCT/3/. Even tested it in my localhost

Sry I copied the basic grid from JqGrid site and then edited that and didn't notice that autoencode:true for grid level. So even though I mentioned it for column level it wasn't working. Now it appears.

Set colmodel datatype = 'html'

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.