I have a treegrid "templatecolumn" that displays an image based on a condition in an XTemplate.
However, I also would like an html formatted tooltip displayed upon mouseover of the image. I've done this with Ext JS 3.x via ext:qtip metatdata attribute in a renderer, but haven't been able to figure out how to do this in Ext JS 4.1 using tpl and haven't found anything in my searching.
Here's what I have to display the image based on a record value:
var myTemplate = new Ext.XTemplate(
'<tpl if="p > 0">',
'<img src="exclamation.gif" height="16" width="16"/>',
'</tpl>'
);
var schedTree = Ext.create('Ext.tree.Panel', {
...
columns:[
{ header:' ', dataIndex:'p', xtype:'templatecolumn', tpl:myTemplate }
]
}
Has anyone done this or have any suggestions? Is there a better way to do this? Thanks
This isn't a method using XTemplate, but this one works for me:
{
text : 'Zdj',
width: 40,
align : 'center',
dataIndex : 'Name',
sortable : false,
resizable: false,
renderer: function (v, m, r) {
if(r.get('leaf')==true) {
m.tdAttr = 'data-qtip="<img src=services/Images.ashx?id='+r.get('id')+' width=60px height=60px>"';
return '<img src="services/Images.ashx?id='+r.get('id')+'" width="25px" height="25px"/>';
}
}
},
In my example I'm showing a bigger image in tooltip, but there is no problem to show HTML formatted tooltip.
You can add conditions to renderer and in my opinion do more that XTemplate can do.
Your small image should go to return line and tooltip content to m.tdAttr.
You can read more about renderer function here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer
Hope this helps :)
Related
I'm using Dojo 1.9 to start learning, and I'm having trouble disabling the resize of the Simple Textarea. I don't really have a particular need to do this, I was just curious about how to and have since been unable.
There is no property listed in the Dijit API, and changing the CSS either with .set("style"), including it inline in the original container (I'm doing it programmatically), or even trying to set resize to none in the original declaration ie:
var textarea = new SimpleTextarea({
rows: 5,
cols: 10,
onFocus: function(){ console.log("textarea focus handler"); },
onBlur: function(){ console.log("textarea blur handler"); },
selectOnClick: true,
style: "resize=none",
value: "This is a sample SimpleTextarea."
}, "textarea");
Any ideas?
If you set style equal to an object with a key value pair of resize : "none" that will do the trick
var textarea = new SimpleTextarea({
style: {resize : "none"}
}, "textarea");
You can do like this:
<input dojotype="dijit.form.SimpleTextarea"
id="yourTxtWidget"
style="resize:none; width: 230px; height: 75px;"
class="myTextField"/>
I have an XTemplate and I would like to add some actual EXT widgets inside the template so that I have template code rendered above and below the widgets. Let's say I have a "dataview" with the following itemTpl defined:
itemTpl: [
'<tpl for=".">',
'<div class="song-page-header">',
' <div class="artwork"><img src="{artwork}"/></div>',
' <h1>{title}</h1>',
' <h2>{artist}</h2>',
' <h3>Genre: {genre}</h3>',
' <p>{copyright}</p>',
'</div>',
/* Ext.Button should go here */
'<tpl for="offers">',
' <p>{offer_id}: {offer_type}, {price}</p>',
'</tpl>',
'</tpl>'
]
Is it possible to define a real Ext.Button there (and not just some HTML approximating the behavior of an Ext.Button)? I don't care if it has to be applied after the fact, but I can't seem to find the correct event handler to use to be able to insert a button there. The Sencha documentation sucks so any help would be greater appreciated.
Actually you can do this, you just have to be a little bit creative.
Check out my blog post here: http://jakes-hackerblog.herokuapp.com/blog/2013/05/23/a-fresh-rails-blog/
Essentially, you put some dynamic div element in your template
'<div id="box-holder">' +
'<div id="box-{schoolpersonid}"></div>'+
'</div>'+
Then you use the use "renderTo" within your button config, calling it in a refresh funciton:
listeners: {
'refresh': function(records) {
var storeRecords = records._store._data.items;
for(var i = 0; i < storeRecords.length; i++){
var data = storeRecords[i].data;
var renderTo = this.element.select('#box-' + data.schoolpersonid).elements[0];
var button1 = new Ext.Button({
action: 'doPresent',
xtype: 'button',
align: 'right',
text: 'Present',
ui: 'present',
renderTo: renderTo,
schoolpersonid: data.schoolpersonid
});
}
}
},
I think XTemplate does not support this feature due to managment and performance of Sencha Touch framework.
Secondly, you cannot do like that because basically you're trying to merge between HTML and javascript inside your itemTpl when sencha template only allow html structure.
In order to address this scenario, you may take a look at Component Dataview
I am trying to build a dynamic image carousel using Sencha Architect. I have a carousel added to a tab panel. The carousel is set up to read images from a store called "pictureStore." I have a function to pull images from the store and create the carousel items - I can get the images from the store but unable to create the carousel. When I try to use carouself.setItems() or carousel.add() I get an error "Object # has no method". Please take a look and let me know if my method is incorrect for creating a dynamic carousel. I appreciate your help and knowledge of how to fix
Thanks,
Function to read images and create carousel items (works up until comment below):
onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) {
Ext.getStore('pictureStore').load(function(pictures) {
var items = [];
Ext.each(pictures, function(picture) {
console.log(picture.get('image'));
if (!picture.get('image')) {
return;
}
items.push({
xtype: 'myimage',
picture: picture
});
});
//following doesn't work for adding the carousel images:
//carousel.setItems(items);
//carousel.add(items);
//carousel.items = [{html: items}];
//carousel.add(carousel.items);
//carousel.setActiveItem(0);
});
},
Sample JSON with image info
{
"test": {
"cat": {
"entries": [
{
"image": "/images/1.png"
},
{
"image": "/images/2.png"
}
]
}
}
}
Error messages when using carousel.add or carousel.setItems:
Object #<HTMLDivElement> has no method 'add'
Object #<HTMLDivElement> has no method 'setItems'
If your variable carousel has no method add or setItems then it's probably not your carousel.
To make sure of that, you can try to do console.log(carousel); to figure out what it is exactly. Also, it doesn't seem to be declared anywhere in your code...
But it's quite simple to fix. I presume you've added a event listener to your carousel that listens to the activate event and if you take a look at the documentation for this event, you can see that the first parameter sent to the callback function is the container (in this case your carousel)
So what you have to write is this :
onMycarouselActivate: function(carousel, newActiveItem, oldActiveItem, options) {
instead of this
onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) {
and you should be all set
EDIT
Also if you take a look at the documentation for the image component, you can see there is no picture in the config but there is a src attribute. SO you should write :
items.push({
xtype: 'myimage',
src: picture
});
Hope this helped
try this code
myCarousel.add({
xtype: 'image',
scr:'path of image'
});
where myCarousel is object of carousel.
You can try this, this is working for me.....
Ext.getStore('Pictures').load(function(pictures) {
Ext.each(pictures, function(picture) {
if (picture.get('image')) {
carousel.add({
html: '<img style="max-width: 100%; max-height: 100%;" src="' + picture.get('image') + '"/>'
});
}
});
});
Hope this will help you...
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.
How to show a checkbox in a dojo datagrid?
I would suggest setting cellType to dojox.grid.cells.Bool, instead of the formatter.The formatter gives you much freedom, but also the responsibility of gathering the data from all the checkboxes (for all the rows) afterwards. Something like this as a structure-entry should do the trick:
{
name: "is awesome?",
width: "auto",
styles: "text-align: center",
type: dojox.grid.cells.Bool, editable: true
}
Please make sure to use a write-store (like ItemFileWriteStore) and not just a read-store, otherwise you will be disabled to actually check the checkbox :)
Use formatter function as described in Widgets Inside dojo.DataGrid
You can return new dijit.form.Checkbox from formatter function in dojo 1.4
You need the IndirectSelection plugin for the EnhancedGrid, here's a fiddle: http://jsfiddle.net/raybr/w3XpA/5/
You can use something like this, with Json
HTML
<table id="myGrid" dojoType="dojox.grid.DataGrid"
clientSort="true" autoHeight="true" autoWidth="true">
<script type="dojo/method">
showFields();
</script>
</table>
DOJO
showFields:function () {
dojo.xhrPost({
url:"/getFields.do",
timeout:2000,
handleAs:"json",
load:dojo.hitch(this, "displayInGrid")
});
},
displayInGrid:function (jsonResult) {
var dataStore = new dojo.data.ItemFileReadStore(
{ data:jsonResult }
);
var checkboxLayout = [
[
{name:'ID', field:"id" },
{name:'Value', field:"id", formatter:this.addCheckBox}
]
];
var grid = dijit.byId("myGrid");
grid.setStructure(checkboxLayout);
grid.setStore(dataStore);
},
addCheckBox:function (val) {
var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
return checkbox;
},
If you are trying to show a checkbox selector on each row of the grid you can follow this tutorial
http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php
If the type of the cell is a boolean, then its value is displayed as either the string true or false. If a check box is desired, setting the cellType to be dojox.grid.cells.Bool and marking it as editable will make a checkbox appear.
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells
From markup, do like this for the desired result:
<th field="booleanField" cellType="dojox.grid.cells.Bool" editable="true">Checkbox field</th>