in this pic this combo visible after selected,
but i want to visible when this grid load.
please advise me ?
{
header: "Consequence",
dataIndex: 'consequence',
width: 100,
sortable: false
editor: {
xtype: 'combo',
store: 'ConsequenceMatrix',
model: 'ConsequenceMatrix',
displayField: 'name',
valueField: 'name',
typeAhead: false,
minChars: 0,
scope: this,
listeners: {
select: function (combo, records) {
this.setValue(records[0].get('name'));
}
}
}
}
That's what Widget Columns are for. Here's an example I happened to prepare this morning.
Widget columns are a new feature in ExtJS 5.
Related
I'm looking for a way to separate custom created context menu visually (like background color etc.) from the default menu options like (Show properties, Isolate, etc.)
I've seen this example:
menu.push({
title: 'Show details',
className: 'fa fa-share',
target: [{
title: 'Hub details',
className: 'fa fa-cloud',
target: () => {
this.emit('context.details', {
event, node, type: 'hubs'
})
}
}]
})
but it seems className key doesn't work here. Is there a way to style context menu ?
The class name for your custom icon must be set to a property called icon, not className. Running the following code snippet works as expected:
NOP_VIEWER.registerContextMenuCallback('test', (menu, status) => {
menu.push({
title: 'Test',
icon: 'adsk-icon-first-person',
target: () => { console.log('It works!'); }
});
});
How to add listeners to components that are defined within itemTpl? For example, if I have a dataview (Ext.view.View) that is bound to a store, and I have defined itempTpl that includes a button and an image, like:
itemTpl: ['<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span>Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg"></div>',
'</div>']
how can I detect that button or image of an item is clicked? I know ho to add listeners to the item, but I would like to detect click event on some inner div or span element of an item.
In addition, I found writing these templates with html very difficult. One of the main advantages of extjs framework is claimed to be exactly hiding html part from the developer. So, I am wondering if there is some better way to display these information with dataview, like including panel or container component as an dataview item.
You can use element delegation:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'imagesStore',
model: 'Image',
data: [{
src: 'http://www.sencha.com/img/20110215-feat-drawing.png',
caption: 'Drawing & Charts'
}, {
src: 'http://www.sencha.com/img/20110215-feat-data.png',
caption: 'Advanced Data'
}, {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
caption: 'Overhauled Theme'
}, {
src: 'http://www.sencha.com/img/20110215-feat-perf.png',
caption: 'Performance Tuned'
}]
});
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
itemTpl: new Ext.XTemplate(
'<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span class="btnSpan">Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg" class="imgClass"></div>',
'</div>',
),
itemSelector: 'div.card',
emptyText: 'No images available',
listeners: {
itemClick: function (view, record, item, index, e, eOpts) {
console.log(e.target);
const classList = e.target.classList;
if (classList.contains('btn')) {
console.log('btn is clicked');
} else if (classList.contains('btnSpan')) {
console.log('Span in Button is clicked');
} else if (classList.contains('imgClass')) {
console.log('ImgClass is clicked');
}
}
},
renderTo: Ext.getBody(),
});
}
});
I have a google chart inside mat-grid-tile. One column has a value of 50 and the other has a value of 30. These values come from service myService and they're correct. When I hover on those bars, that shows me correct values on tooltip. But the column heights don't seem like 50 and 30. That 30 one looks shorter than it should be. How can I make it correct?
Here what I tried
TS File
ysData: any;
options = {
backgroundColor: '#fafafa',
legend: { position: 'none' },
hAxis: {
baselineColor: 'none',
ticks: []
},
vAxis: {
baselineColor: 'none',
ticks: []
},
colors: ['ffc000']
}
constructor()
{
this.ysData = [["Growth", this.myService.growth], ["Health", this.myService.health]];
}
HTML
<mat-grid-tile [colspan]="2" [rowspan]="12">
<google-chart #chart
[type]="'ColumnChart'"
[data]="ysData"
[options]="options"
[dynamicResize]="true"
[width]="200" [height]="400">
</google-chart>
</mat-grid-tile>
You need to provide the range of min and max value which in your case could be between 0 and 100 like below:
axes: {
y: {
all: {
range: {
max: 100,
min: 0
}
}
}
},
You can check the demo at JSFiddle
for the classic ColumnChart, set the range on the vAxis using option viewWindow
add to your chart options...
vAxis: {
baselineColor: 'none',
ticks: [],
viewWindow: { // <-- add view window
min: 0
}
},
I have a kendo grid that looks a bit like this (code edited for clarity):
var gridList = $('##listBo').kendoGrid({
...
columns: [
...
{
command: "edit"
, title: 'Edit' // Need to make this text conditional
, width: 91
}
]
...
, editable: {
mode: "popup"
, template: $("##addEditPopup").html()
, window: {
open: loadJSOnWindowLaunch
, title: "Reservation request"
}
}
, dataBound: function(e) {
dataBoundFunction();
}
}).data("kendoGrid");
I need to make the button say 'Edit' in some circumstances and 'View' in others, based on values in the datasource.
How do I best do this?
One simple approach to deal with this situation is to make a custom command column and then using template option you can render the column button according to your condition.
Try like this :
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ template: comandTemplate }],
editable: "popup"
});
});
// render command column button based on condition
function comandTemplate(model){
// here i use Discontinued attribute to data model to show
// view detail button or edit button
if(model.Discontinued==0)
{
return '<a class="k-button k-button-icontext k-grid-edit" href="#"><span class="k-icon k-edit"></span>Edit</a>';
}
else
{
return '<a class="k-button k-button-icontext" href="javascript:void(0)" onclick="viewDetailsAction()">View Details</a>';
}
}
// Custom action if view detail button click
function viewDetailsAction()
{
alert("Your custom action for view detail");
}
Here is a working sample http://dojo.telerik.com/AdAKO
I hope it will help you.
You just need to add custom column in columns like this
{
template: "# if (property == true) { # <a class="k-button k-grid-edit"
href="#"><span class="k-icon k-edit"></span>Edit</a> # } else { #
<a class="k-button"><span onClick="callFunction()"
</span>View</a> # } #", width: "150px"
}
where "property" is a field which will be use as condition field to display different buttons.
Hope, This will work for you. (ThumbsUp)
I hope someone can explain this to me. I have built a sencha touch 2.2.1 app and converted it to a native android app.
I have a map view that extends Ext.Map as shown below. When I remove that view, the app loads successfully on my mobile. When I integrate the view again, the mobile app first displays a white screen, then it displays the default sencha theme blue screen and stays there. Not even the loading indicator appears.
When the apk was tested in the emulator, everything works fine.
I included this line in index.html before using the map. I included it in the HEAD section. However in the sencha examples provided, it is included in the BODY section. Does it make any difference?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Here are my files:
Controller:
Ext.define('EntityApp.controller.Map', {
extend : 'Ext.app.Controller',
requires : 'Ext.device.Connection',
config : {
refs : {
map : '.mappanel'
},
control : {
map: {
initialize: 'initMap'
}
}
},
initMap: function () {
var me = this;
var gMap = me.getMap();
gMap.on('maprender', this.onMapRender, this, {single : true});
},
onMapRender: function(e) {
if (Ext.device.Connection.isOnline()) {
var latLngCoordinates = new google.maps.LatLng(<value>, <value>);
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMap().getMap()
});
this.getMap().getMap().setMapTypeId(google.maps.MapTypeId.ROADMAP);
this.getMap().setMapCenter(latLngCoordinates);
this.getMap().getMap().setZoom(17);
}
}
});
View:
Ext.define('EntityApp.view.Map', {
extend: 'Ext.Map',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Location'
},
mapOptions: {
center: !(window.google || {}).maps ? null : new google.maps.LatLng(<value>, <value>),
zoom: 17
}
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});
Even I'm also getting same error, I just add
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
tag after
<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
in my index.html. It works fine. Try this.
I managed to solve the above by overriding the Ext.Map with my own data.
I also assigned a custom xtype called mymap and now I just do xtype:'mymap' and a map component loads with my custom data, as shown below:
Ext.define('App.view.Map', {
extend: 'Ext.Panel',
xtype: 'mappanel',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: [
{ docked: 'top', xtype: 'titlebar', title: 'Location' },
{ xtype: 'mymap' }
]
}
});
It seems that sencha processes the views data before the script tags in index.html. Correct me if I am wrong...