Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My ExtJs chart Experiment. Using GWT 2.8.0-beta1(&SNAPSHOT) JsInterop, Wrapping a ExtJs chart. (The JSNI is for comparison of the JsInterop.)
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gwt.jsinterop.examples.client.ext.Ext;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;
import jsinterop.annotations.JsFunction;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
// http://docs.sencha.com/extjs/6.0/6.0.1-classic/
public class BarSeriesChartExample3 implements EntryPoint {
@Override
public void onModuleLoad() {
TextButton button = new TextButton("draw chart");
button.addSelectHandler(new SelectHandler() {
@Override
public void onSelect(SelectEvent event) {
drawChart1();
// drawChart2();
}
});
RootPanel.get().add(button);
}
@JsType
public static class NameValueModelConfig {
@JsProperty()
public String name = "";
@JsProperty()
public Double value = 0.0;
}
@JsFunction
public static interface Constructor {
Object onConstructor(Object config);
}
@JsType()
public static class NameValueModel {
@JsProperty()
public String name;
@JsProperty()
public Double value;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Axes {
@JsProperty
String type;
@JsProperty
String position;
@JsProperty
Object title;
@JsProperty
String fields;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Series {
@JsProperty
String type;
@JsProperty
Object subStyle;
@JsProperty
String xField;
@JsProperty
String yField;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class ChartConfig {
@JsProperty
String xtype;
@JsProperty
String renderTo;
@JsProperty
int width;
@JsProperty
int height;
@JsProperty
Object store;
@JsProperty
Object[] axes;
@JsProperty
Object[] series;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Title {
@JsProperty
String text;
@JsProperty
int fontSize;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class SubStyle {
@JsProperty
String[] fill;
@JsProperty
String stroke;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class Field {
@JsProperty
String name;
@JsProperty
String type;
}
@JsType
public static interface Store {
void add(Object data);
}
@JsType
public static class NameValueModelDefine {
@JsProperty
public Object extend;
@JsProperty
public Object[] fields;
@JsProperty
public Object constructor;
public native Object initConfig(java.lang.Object config);
}
private native void createModel0() /*-{
$wnd.Ext.define('com.example.NameValueModel', {
config : {
name : 'Z',
value : 0,
},
constructor : function(config) {
this.initConfig(config);
return this;
},
schema : "com.example"
});
}-*/;
@JsType
public static class DefineConfig {
@JsProperty
Object extend;
@JsProperty
Object fields;
}
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public static class StoreConfig {
@JsProperty
Object model;
@JsProperty
Object fields;
@JsProperty
Object[] data;
@JsProperty
Object autoLoad;
@JsProperty
Object proxy;
}
@JsType
public static class Proxy {
@JsProperty
Object type;
@JsProperty
Object url;
@JsProperty
Object reader;
}
@JsType
public static class Reader {
@JsProperty
Object type;
@JsProperty
Object rootProperty;
}
private void drawChart1() {
Field field0 = new Field();
field0.name = "name";
field0.type = "string";
Field field1 = new Field();
field1.name = "value";
field1.type = "float";
Field[] fields = new Field[2];
fields[0] = field0;
fields[1] = field1;
DefineConfig defineConfig = new DefineConfig();
defineConfig.extend = "Ext.data.Model";
defineConfig.fields = fields;
Ext.define("com.example.NameValueModel", defineConfig);
NameValueModel nvm0 = new NameValueModel();
nvm0.name = "A";
nvm0.value = 1.0;
NameValueModel nvm1 = new NameValueModel();
nvm1.name = "B";
nvm1.value = 2.0;
NameValueModel nvm2 = new NameValueModel();
nvm2.name = "C";
nvm2.value = 3.0;
NameValueModel nvm3 = new NameValueModel();
nvm3.name = "D";
nvm3.value = 4.0;
NameValueModel nvm4 = new NameValueModel();
nvm4.name = "E";
nvm4.value = 5.0;
NameValueModel[] datas = new NameValueModel[4];
datas[0] = nvm0;
datas[1] = nvm1;
datas[2] = nvm2;
datas[3] = nvm3;
datas[4] = nvm4;
StoreConfig storeConfig = new StoreConfig();
storeConfig.model = "com.example.NameValueModel";
storeConfig.data = datas;
Object store = Ext.create("Ext.data.Store", storeConfig);
Title title1 = new Title();
title1.text = "Sample Values 1";
title1.fontSize = 15;
Title title2 = new Title();
title2.text = "Sample Values 2";
title2.fontSize = 15;
Axes axes1 = new Axes();
axes1.type = "numeric";
axes1.position = "left";
axes1.title = title1;
axes1.fields = "value";
Axes axes2 = new Axes();
axes2.type = "category";
axes2.position = "bottom";
axes2.title = title2;
axes2.fields = "name";
Axes[] axes = new Axes[2];
axes[0] = axes1;
axes[1] = axes2;
String[] fills = new String[1];
fills[0] = "#388FAD";
SubStyle subStyle = new SubStyle();
subStyle.fill = fills;
subStyle.stroke = "#1F6D91";
Series series1 = new Series();
series1.type = "bar";
series1.subStyle = subStyle;
series1.xField = "name";
series1.yField = "value";
Series[] series = new Series[1];
series[0] = series1;
ChartConfig chartConfig = new ChartConfig();
chartConfig.xtype = "cartesian";
chartConfig.renderTo = "chartDivId";
chartConfig.width = 600;
chartConfig.height = 400;
chartConfig.store = store;
chartConfig.axes = axes;
chartConfig.series = series;
Ext.create(chartConfig);
}
private native void drawChart2() /*-{
$wnd.Ext.create({
xtype : 'cartesian',
renderTo : "chartDivId",
width : 600,
height : 400,
store : {
fields : [ 'name', 'value' ],
data : [ {
name : 'metric one',
value : 10
}, {
name : 'metric two',
value : 7
}, {
name : 'metric three',
value : 5
}, {
name : 'metric four',
value : 2
}, {
name : 'metric five',
value : 27
} ]
},
axes : [ {
type : 'numeric',
position : 'left',
title : {
text : 'Sample Values',
fontSize : 15
},
fields : 'value'
}, {
type : 'category',
position : 'bottom',
title : {
text : 'Sample Values',
fontSize : 15
},
fields : 'name'
} ],
series : {
type : 'bar',
subStyle : {
fill : [ '#388FAD' ],
stroke : '#1F6D91'
},
xField : 'name',
yField : 'value'
}
});
}-*/;
}
import jsinterop.annotations.JsMethod;
import jsinterop.annotations.JsPackage;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;
@JsType(isNative = true, name = "Ext", namespace = JsPackage.GLOBAL)
public abstract class Ext {
@JsProperty(name = "isChrome")
public static native boolean isChrome();
@JsMethod()
public static native void define(String className, java.lang.Object data);
@JsMethod()
public static native java.lang.Object create(java.lang.Object config);
@JsMethod()
public static native java.lang.Object create(String className, java.lang.Object config);
}
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="MyGxtProjectExtJs.css">
<title>Project Ext Js</title>
<script type="text/javascript" src="JsInteropExamples/JsInteropExamples.nocache.js"></script>
<!-- extjs -->
<link rel="stylesheet" type="text/css" href="theme-triton/resources/theme-triton-all.css">
<link rel="stylesheet" type="text/css" href="triton/resources/charts-all-debug.css">
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="charts-debug.js"></script>
<script type="text/javascript" src="theme-triton/theme-triton.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="chartDivId" style="width:800px; height:800px; border: 1px solid red;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment