I'm trying to retrieve images from database to data view using ExtJS 4. Now I need to pass parameters dynamically. Mostly here..........
Ext.define('${pkgName}.v02x003001.SV02X00300102' , {
extend : 'Ext.view.View',
alias : 'widget.sv02x00300102',
id : 'images-view',
autoScroll : true,
trackOver : true,
multiSelect : true,
height : 310,
overItemCls : 'x-item-over',
itemSelector : 'div.thumb-wrap',
emptyText : 'No images to display',
prepareData : function(data) {
Ext.apply(data, {
shortName : Ext.util.Format.ellipsis(data.name, 15),
sizeString: Ext.util.Format.fileSize(data.size),
dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
});
return data;
},
initComponent: function() {
var me = this;
var value= Ext.getCmp('member-sv02x00300104').getValue();
me.store = 'S02X003001',
me.tpl = [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="${createLink(mapping:'img', params:[member: **value** , width:100, height:100])}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
];
me.callParent(arguments);
}
});
So my question is how do I set value into params ( for member field )
createLink is a grails component that is processes server side, before your JS code is run.
You can't pass JS variables to a Java component because Java will always be processed first on the server and then the resulting HTML and JS will be sent to the client for processing. Client will know nothing about your server side code blocks.
I suggest you rewrite createLink piece in HTML and substitute in JS variables like you do with name and short name.
Related
I have the following columnDefs for my angularjs ui grid :
ctrl.temporaryRegGridOptions.columnDefs = [ {
field: 'firstName',
'displayName': 'First / Company Name',
cellTemplate: '<span ng-click="ctrl.grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '
}, {
field: 'lastName',
'displayName': 'Surname',
width: '150'
} ]
and I have
ctrl.gotoRequiredState = function() {
alert("next State");
}
All I need to do is, on ng-click of a cell I need to call a function.Similar to ClicMe at http://ui-grid.info/docs/#/tutorial/305_appScope. On the official website this feature is given with $scope but in my controller, I am using var ctrl = this; syntax. May be that is the reason even if I have given ng-click="grid.appScope.gotoRequiredState()">, the gotoRequiredState() function is not getting called. So I have changed it to ng-click="ctrl.grid.appScope.gotoRequiredState()"> but still no luck. Even after I click firstName cell, the gotoRequiredState() function is not getting called. Can any one help me to fix this.
The following has solved the problem :
ctrl.temporaryRegGridOptions.appScopeProvider = ctrl;
with
cellTemplate: '<span ng-click="grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '
works fine.
otherwise simply using :
cellTemplate: '<span ng-click="grid.appScope.$parent.$ctrl.gotoRequiredState()">{{row.entity.firstName}} </span> '
works fine without assigning ctrl to appScopeProvider. By the way I am using Angularjs 1.5 + components architecture.
From the documentation that you have shared, I presume that appScope is the parent scope of the grid directive.
If thats the case, could you try
ng-click="grid.appScope.ctrl.gotoRequiredState()" ?
I'm carrying a $ ionicPopup with a variable that I get from my webservice. The problem that I have is not as filling into a variable. I leave my code:
if(data.Count > 0){
$scope.areas = data.Area;
var contentHtml = '<ul ng-repeat="area in data.Area"><li>{{area.name}}</li></ul>';
$ionicPopup.show({
title: 'Areas disponibles',
subTitle: '',
content: contentHtml,
scope: $scope,
buttons: [{
text: 'Salir',
onTap: function(e) {
}
}]
})
}
This obviously does not work and I'm looking to be able to load that variable in the ng-repeat, if someone could help me appreciate it.
In your HTML you can only use scoped var (ie : $scope.data mean that data is scoped).
data.Area isn't accessible into your html.
Doing this :
$scope.areas = data.Area;
You make it accessible as "areas" in your html.
Using ng-repeat like this :
ng-repeat="area in areas"
Will do the trick.
I have an ExtJS 4.2 view.View (dataView) using a template, store and model; pretty much as the documentation describes, and the information is displayed fine.
I now need to alternate the background colour of each item. How is this best accomplished?
There aren't any easy config options to do this like Sencha Touch's striped: true, or any inherent styling like in the grid.Panel; I have looked for a listener that would allow for setting the tpl and itemSelector for each item, but there doesn't seem to be anything listed that would suffice.
Code:
Ext.define('productionHistoryModel', {
extend: 'Ext.data.Model',
fields: [ 'Date', 'Fore_Name', 'Event', 'Comments' ]
});
var productionHistoryStore = Ext.create('Ext.data.Store', {
id: 'productionHistoryStore',
storeId: 'productionHistoryStore',
model: 'productionHistoryModel'
});
var historyTpl1 = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="x-grid-row">',
'<span style="font-weight: bold;">{Date}: {Event} ({Fore_Name})</span>',
'<br/><span>{Comments}</span>',
'</div>',
'</tpl>'
);
var productionHistoryView = Ext.create('Ext.view.View', {
id: 'productionHistoryView',
store: productionHistoryStore,
tpl: historyTpl1,
itemSelector: 'div.x-grid-row',
emptyText: 'No logs available',
disableSelection: true,
autoScroll: true,
maxHeight: 500
});
You're using a view which means you're defining the HTML to be generated yourself, using a XTemplate. That is why there is no built-in feature for striped rows, since the framework simply doesn't know which HTML will be rendered.
The simplest solution is to add a class attribute to each row in your template indicating whether the row number is odd or even, and then use CSS to style the rows accordingly.
Actually there already is an example in the documentation of Ext.XTemplate (scroll down to "Execute arbitrary inline code with special built-in template variables"):
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
The corresponding CSS code would look like:
.odd {
background-color: white;
}
.even {
background-color: gray;
}
I need to populate dynamically a Ext.dataview.List with some value from a Store when a method will be called in the Controller. Any idea how to do it? With my following code I can see Ext.dataview.List empty. When debugging I can see storeEvents2 is populated correctly.
Please provide me a sampe of code if possible.
populateViewsAfterLogIn: function (){
var me = this;
debugger
var storeEvents2 = Ext.getStore('Events2');
storeEvents2.load();
storeEvents2.sync();
var myEventsList = me.getEventsList();
myEventsList.initialize();
myEventsList.data(storeEvents2);
},
STORE
Ext.define('XXX.store.Events2',{
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.JsonP'],
config:{
model: 'XXX.model.Event2',
proxy:{
type:'jsonp',
url: Configurations.listAllTimetableEventsCustom,
reader:'json'
},
autoLoad:true,
sorters: [{ property: 'DateTimeStart', direction: 'ASC'}] ,
grouper: {
groupFn: function(item) {
return item.get('convDate');
},
sortProperty: 'groupSorterProp',
direction: "ASC"
}
}
});
View
Ext.define("XXX.view.EventsList", {
extend: "Ext.dataview.List",
alias: "widget.eventslist",
config: {
loadingText: "Loading Events...",
emptyText: '<div class="notes-list-empty-text">No notes found.</div>',
onItemDisclosure: false,
itemTpl: '<div class="list-item-title">\n\
<div class="list-item-title-row">\n\
<div class="bl-hours"><span class="timetable-hours">{DateTimeStartConverted}</span></div>\n\
<div class="bl-event">{EventTitle}</div>\n\
</div>\n\
</div>',
grouped: true
}
});
You should get a error when calling data() because this method does not exist. Use setData instead.
Update
You should bind yourself to the store 'load' event
populateViewsAfterLogIn: function (){
var me = this,
store = Ext.getStore('Events2');
debugger
me.getEventsList().setStore(store );
store.load();
}
setData() is expecting a array and not a store instance. In your case you should bind the store to the list before loading it. Sencha will then care about anything.
I want to add images in front of the text in an ExtJS combobox. I have the following code in listConfig...
listConfig: {
getInnerTpl: function(displayField) {
var tpl = '<div>' +'my img path is here' + '{name}</div>';
return tpl;
}
},
And my store is like this
Ext.define('state', {
extend: 'Ext.data.Model',
fields: [{ name: 'stateCode', type: 'int' }, { name: 'name', type: "string"}]
});
My JSON response from the server...
[{"stateCode":"0","name":"--Select--"},{"stateCode":"1","name":"ABC"},{"stateCode":"2","name":"XYZ"},{"stateCode":"3","name":"OPQ"},{"stateCode":"188587","name":"LMN"}]
Here i get the image infront of all items in combobox, but I only want the image infront of items with stateCode 1.
Please help
listConfig: {
getInnerTpl: function(displayField) {
var tpl = new XTemplate(
'<div>',
'<tpl if="stateCode > 0">',
'<img src='img/path/image.jpg' />',
'</tpl>',
'</div>'
);
return tpl;
}
}
I know this is old, but since I've encountered similar problem just recently, I'm gonna post my solution, maybe it will be some help to others.
In this case, you can do something like this:
listConfig: {
getInnerTpl: function(displayField) {
var tpl = '<div>' +'{[values.stateCode == 0 ? "<img src=\'path/to/image.jpg\'" : ""]}' + '{name}</div>';
return tpl;
}
},
var tpl = '<div><img src='img/path/image.jpg' class="state-{state}" />{name}</div>';
then uses css clasess to do something with your image (like hide or show)
I'm using ExtJS 5 and this is working for me:
listConfig: {
itemTpl: [
'<tpl if="stateCode = 0"', // If you have to use '<' or '>' you have to encode it (>)
'<img src="path/to/img.png" /> {name}',
'<tpl else>',
'{name}',
'</tpl>'
]
}
None of the answers so far were working for me, except #riza, but that doesn't provide enough logic for what I needed to do with multiple else if statements. It turns out that others were using "," instead of "+" (except #riza) to concatenate the strings of the tpl. Also, #MMZurita makes a good point with the encoding special characters in HTML. So > becomes > and < becomes <. The <div> and </div> need to go at the beginning and end of the actual tpl tag!
listConfig: {
getInnerTpl: function() {
var tpl =
'<div>' +
'<tpl if="id == 1">' +
'<img src="resources/icons/one.png" align="left"> {name}' +
'<tpl elseif="id == 2">' +
'<img src="resources/icons/two.png" align="left"> {name}' +
'<tpl elseif="id > 2">' +
'<img src="resources/icons/Custom.png" align="left"> {name}' +
'<tpl else>' +
'<img src="resources/icons/Standard.png" align="left"> {name}' +
'</tpl>' +
'</div>';
//);
return tpl;
}
}