I am trying to integrate ExtJS 2.0 with Java rich faces. I am trying to obtain a basic layout using Ext.Panel.
So I have written a code like:
Ext.onReady(function()
{
Ext.QuickTips.init();
var myBorderPanel = new Ext.Panel(
{
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items:
[
{
autoLoad:{url: 'panel.html', scripts:true},
renderTo: document.body.footer, // a div by name footer
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
}]
});
});'
The above code works fine. But in the above code if i use panel.xhtml instead of panel.html, it does not work.
If this is a repost I am sorry.
I got it working but without using autoLoad. I used contentEl and that works as a perfect alternative.
Related
How to fix it? I found a bug on layout card animation using grid component;
What happens?
When you configure the layout for the "card" type and animation for "slide", "cover" etc... the line selection (record) stops working, when hovering over the record and clicking, the css of check gives bug.
When you change the layout to "card" simply, the grid selection works normally.
I'm using Windows 10, Edge browser;
See the bug on Sencha Fiddle
It is only the grid, dataview does not appear to have the same problem.
Not getting the error on firefox.
Also only with Material theme because it is related to Fashion. I could not figure out how to import Fashion in the sencha fiddle so I could not add to your fiddle.
I found that if you unchecked ANY color in chrome devtools the problem goes away for one animation. So i messed around with resetting the colors and that seems to work. You have to change a color wait 10 milliseconds and change it back. You can change ANY color. I am changing the hovered-background-color but it can be anyone of the predefined colors. I change it just one shade and it is only for 10 milliseconds. It will only work with colors in the format of #11111.
I have not figured out what is causing the problem but I have a huge hack of a work around. I am sure this can be improved... also did not test much at all. Feel free to post any improvements, or if you figure out the underlying problem.
items: [{
xtype: "grid",
ui: 'default',
listeners: {
show: function() {
let cssVariables = Fashion.css.getVariables();
let oldColor = cssVariables['hovered-background-color'];
newColor = parseInt(oldColor, 16);
newColor = '#' + (((newColor & 0x0000FF) + 1) | ((((newColor >> 8) & 0x00FF) + 1) << 8) | (((newColor >> 16) + 1) << 16)).toString(16);
cssVariables['hovered-background-color'] = newColor;
Fashion.css.setVariables(cssVariables);
Ext.defer(function() {
cssVariables['hovered-background-color'] = oldColor;
Fashion.css.setVariables(cssVariables);
}, 10);
}
},
title: 'Simpsons',
store: {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', width: 200 },
{ text: 'Email', dataIndex: 'email', width: 250 },
{ text: 'Phone', dataIndex: 'phone', width: 120, flex: 1 }
]
}, {
Hy guys,
I would like to know if is possible to create a line chart like this Linear chart with Chart.js with javascript in a WebView in a Xamarin.Forms page, the values of the lines must be added in code.
I followed this tutorial, to implement a Hybrid WebView
The tutorial is working fine more or less, but I changed the index.htm file and I added the utils.js to have the same chart as in the first link.
The content of index and utils.js is the same as you cand find in the first link with F12.
But I don't know what I need more, my intuition says that the utils.js file is not working fine. This is the result when I run the app, I hope someone has a solution :)
Now I can see the chart fine in the Xamarin.Forms page, to do it I just copied all the files and changed the route in multi-axi.html.
<!doctype html>
<html>
<head>
<title>Line Chart Multiple Axes</title>
<script src="../../../../dist/2.8.0/Chart.min.js"></script>
<script src="../../utils.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
<script>
var lineChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
borderColor: window.chartColors.red,
backgroundColor: window.chartColors.red,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
yAxisID: 'y-axis-1',
}, {
label: 'My Second dataset',
borderColor: window.chartColors.blue,
backgroundColor: window.chartColors.blue,
fill: false,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
],
yAxisID: 'y-axis-2'
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = Chart.Line(ctx, {
data: lineChartData,
options: {
responsive: true,
hoverMode: 'index',
stacked: false,
title: {
display: true,
text: 'Chart.js Line Chart - Multi Axis'
},
scales: {
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
}, {
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'right',
id: 'y-axis-2',
// grid line settings
gridLines: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
},
}],
}
}
});
};
document.getElementById('randomizeData').addEventListener('click', function() {
lineChartData.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myLine.update();
});
</script>
</body>
</html>
The result:
I have one last problem, the lineChartData variable must be created in the .cs file with custom data, how I do that?
I found a ton of people having this issues online of using js charts in Xamarin.Forms so I took some inspiration from HybridWeb view and some Gists online and created a Nuget Package to solve this.
https://github.com/ChristopherMWood/XamarinChartJSPlugin
It will allow you to configure charts in C# and it converts them to chart.js charts in a WebView. As of writing this it's fairly new but it helps solve the main line use cases using CHart.js.
Hi i need little help with the scenario i am facing hard to get. i have a horizontal list view of images i want to show only three images on the screen and with center image highlighted.
I tried carousel but only the image highlighted will be scrollable, i want the horizontal kind of smooth scrolling.
Is something like using hbox panel on top of horizontal list view works?
var superpanel = new Ext.Panel({
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
id: 'panel_1',
width: '100%',
layout: 'fit',
items: [
{
xtype: 'list',
flex:1,
id: 'list1',
store: 'samplestore1'
}
]
}
]
});
can someone help with the scenario how to achieve this.
Any help is much appreciated
You don't need carousel for this. Dataview will serve the purpose. Check out this dude:
Ext.define('Example.view.HorizontalList', {
extend: 'Ext.dataview.DataView',
xtype: 'horizontallist',
config: {
inline: {
wrap: false
},
scrollable: {
direction: 'horizontal'
},
//set the itemtpl to show the fields for the store
itemTpl: '{name} {image}',
//bind the store to this list
store: 'xyz'
}
});
You can also check this.
I'm currently working on a project where we recieved all our icons in 1 sprite file. I have never ever used sprites (and i'm pretty new to extjs)
I cannot find a decent example of how to transform the following code (which uses 1 upload.png) into using a spritefile (icons.png)
{
xtype: 'actioncolumn',
cls: 'tasks-icon-column-header tasks-upload-column-header',
width: 24,
icon: 'images/upload.png',
iconCls: 'x-hidden',
tooltip: 'Upload',
menuDisabled: true,
sortable: false
handler: Ext.bind(me.handleUploadClick, me)
}
You need to define class in your css file and define the background image and position of your icon in sprite. For example, if you have icons like this, do something like below to define your class and show only google icon:
.google_icon {
background:url(http://start.ubuntu.com/12.04/sprite.png) -10px -310px;
height:38px;
}
and use this class in your code like this:
iconCls: 'google_icon',
you also need to remove this line:
icon: 'images/upload.png'
I hope it helps!
When I move between views in my Sencha Touch app I see the animation (slide), then the original view(the one I started at) is shown again. At that point, if I click anywhere in the app the view will change to the correct newly active item.
I'm using Sencha Touch, XCode 4, iOS 5 SDK, and PhoneGap 1.3.0.
Thanks in advance!
here's the code for the main viewport:
plantanalyzer.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(plantanalyzer.views, {
login: new plantanalyzer.views.Login(),
plantDetail: new plantanalyzer.views.PlantDetail(),
buildingList: new plantanalyzer.views.BuildingList()
});
Ext.apply(this, {
items: [
plantanalyzer.views.login,
plantanalyzer.views.plantDetail,
plantanalyzer.views.buildingList
]
});
plantanalyzer.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
and for the viewController:
plantanalyzer.controllers.viewController = new Ext.Controller({
index: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.plantDetail, options.animation);
},
show: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.buildingList,
options.animation);
}
});
and this is the code for one of the views:
plantanalyzer.views.PlantDetail = Ext.extend(Ext.Panel, {
width: 320,
height: 480,
items: [
{
xtype: 'panel',
html: '<img src="images/logo.jpg"/>',
tpl: '{name}',
cls: 'plantToolbar'
},
{
xtype: 'button',
name : 'buildingSelect',
text: 'Select Building',
cls: 'standardButton',
listeners: {
'tap': function () {
'use strict';
Ext.dispatch({
controller: plantanalyzer.controllers.viewController,
action: 'show'
});
}
}
},
{
xType: 'panel',
cls: 'infoBoxes',
html: 'Efficiency (kw/ton)<br><canvas id="eff"></canvas>'
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalTons',
html: 'Total Plant Tons: '
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalCost',
html: 'Real-time Plant Cost: '
},
{
xType: 'panel',
name: 'uodateTime',
cls: 'lastUpdate',
html: 'Last Update: '
}
]
});
The code looks fine in both sections. When i had issues with phonegap and sencha touch doing this i generally found there was a javascript error occurring or extra html markup was in between the body tag of the index.html file. The first thing would be to open the console in chrome or safari and check the javascript console to determine if it is a javascript error. If you can't run it in them i would suggest the Wienre application that will give you a console and was written to debug phonegap applications (wienre will also allow you to view the html markup to make sure it is correct)
The problem must be somewhere in the view files. The code you have shown is correct.
Well, for what it's worth, after rebuilding the app I found the issue. It was some custom css that was screwing up the app. Specifically the width that was being set on some of the components.
Hopefully, this will save somebody else some time and heartache.
Thanks, Darren and Ilija for your help!