Related
I have the world map. I want to change the color of each country to black.
How can I get it?
{
backgroundColor: '#1b1b1b',
color: ['gold','aqua','lime'],
title : {
text: '模拟迁徙',
subtext:'数据纯属虚构',
x:'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: '{b}'
},
legend: {
orient: 'vertical',
x:'left',
data:['北京 Top10', '上海 Top10', '广州 Top10'],
selectedMode: 'single',
selected:{
'上海 Top10' : false,
'广州 Top10' : false
},
textStyle : {
color: '#fff'
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
dataRange: {
min : 0,
max : 100,
calculable : true,
color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
textStyle:{
color:'#fff'
}
},
series : [
{
name: '全国',
type: 'map',
roam: true,
hoverable: false,
mapType: 'world',
itemStyle:{
normal:{
color:'#000',
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaStyle:{
color: '#000000'
}
}
},
data:[],
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
color:'#000',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
],
},
geoCoord: {
}
}
]
}
http://echarts.baidu.com/option.html#geo.itemStyle.areaColor
you can use areaColor property
itemStyle:{
normal:{
color:'#000',
borderColor:'rgba(100,149,237,1)',
borderWidth:0.5,
areaColor: 'black',
areaStyle:{
color: '#000000'
}
}
}
I've created a form using ExtJs library. Here is my code;
form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Vehicle Registration Number',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Device ID',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Default Rep',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Driver',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 1',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 2',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
win1.hide();
}
} ]
});
win1 = new Ext.Window({
title: 'Vehicle Assigning',
layout: 'fit',
autoScroll: true,
y: 120,
width: 600,
height: 500,
modal: true,
plain:true,
bodyStyle:'padding:8px;',
buttonAlign:'center',
closeAction: 'hide',
floating: true,
closable : true,
items: [form1]
});
win1.show();
It pop ups a new window successfully, but there is a problem. All the text fields(Vehicle Registration Number, Device ID, and so on) are not showing correctly. The form looks like following:
Why these text fields are not showing correctly ? Another thing that I want to know is how should I center the whole form within the window. I've tried following code but no luck.
layout: {
pack: 'center',
type: 'hbox'
},
Any suggestions are appreciated.
Thank you
1) Looks like your border is overlapping your labels. You can add some padding to the label if you want to move them over slightly. (see below)
2) You have to set the layout on the form, not on the window, if you want the form's contents to be centered.
The code below applies a label width of 200 to each label, adds 25px of padding to the left hand side, and centers the labels and fields in the form.
var form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
labelWidth: 200,
padding: '0 0 0 25'
},
...
I have two grids with a own proxy store each. Each store is bound to the same model with the following definition:
Ext.define('Issue', {
extend: 'Ext.data.Model',
fields : [{
name : 'updated_on',
type : 'string'
}, {
name : 'done_ratio',
type : 'int'
}, {
name : 'start_date',
type : 'string'
}, {
name : 'subject',
type : 'string'
}, {
name : 'due_date',
type : 'string'
}, {
name : 'created_on',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'id',
type : 'int'
}, {
name : 'assigned_to',
mapping: 'assigned_to.name'
}, {
name: 'parked',
mapping: 'custom_fields[9].value',
type: 'boolean'
}]
});
The stores their grids and the related container buttons etc. are created in a function. The 2 functions looks like:
var createMyPanel = function() {
var store = new Ext.data.Store({
/*sorters: ['gemeinde','assigned_to'],
groupField: 'gemeinde',*///comment in when want enable grouping
model : 'Issue',
autoLoad: true,
autoSync: true,
proxy : {
type : 'rest',
url : '/issues.json',
reader : {
type : 'json',
root : 'issues'
},
extraParams : runtime.CView.Model.getParams('my')
}
});
var groupingFeature = new Ext.grid.feature.Grouping({
groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
});
var searching = new Ext.ux.grid.feature.Searching({
minChars: 3,
mode: 'local',
searchText: 'Suche einschränken',
selectAllText: 'Alle Felder (ab)wählen',
searchTip: '',
minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
width: 200
});
var commentBtn = new Ext.Button({
text: 'Kommentar zum gewählten Ticket erfassen',
disabled: true,
ticket: null,
margin: 5
});
var toGfBtn = new Ext.Button({
text: 'an GIS-Fachstelle melden',
disabled: true,
ticket:null,
margin: 5
});
var abbruchBtn = new Ext.Button({
text: 'als abgebrochen melden',
disabled: true,
ticket:null,
margin: 5
});
var parkBtn = new Ext.Button({
text: 'Ticket zurücklegen',
disabled: true,
ticket:null,
margin: 5
});
var journalPanel = new Ext.Panel({
title: 'Kommentare',
html:'',
border: false,
autoScroll: true,
flex: 30,
padding: '5 5 5 5'
});
var buttonPanel = new Ext.Panel({
padding: '30 30 10 30',
border: false,
flex: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
});
var contentPanel = new Ext.Panel({
title : 'Beschreibung',
border: false,
html:'',
flex: 50,
padding: '5 5 5 5'
});
var southPanel = new Ext.Panel({
padding: '0 0 5 0',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 30,
items:[contentPanel, journalPanel, buttonPanel]
});
var grid = new Ext.grid.Panel({
store : store,
autoScroll : true,
flex: 70,
columns : [{
text : 'Ticket-Nummer',
width : 100,
sortable : true,
dataIndex : 'id',
menuDisabled : true
}, {
text : 'Abgabe-Datum',
sortable : true,
width : 100,
dataIndex : 'due_date',
menuDisabled : true
}, {
header : 'Thema',
width : 200,
sortable : true,
dataIndex : 'subject',
renderer : function(val) {
return '<div style="white-space:normal !important;">'
+ val + '</div>';
},
menuDisabled : true
}, {
header : 'Gemeinde',
width : 200,
sortable : true,
dataIndex : 'gemeinde',
menuDisabled : true
}, {
header : 'Parzelle',
width : 200,
sortable : true,
dataIndex : 'parzelle',
menuDisabled : true
}, {
header : 'zurückgelegt',
width : 200,
sortable : true,
dataIndex : 'parked',
menuDisabled : true,
renderer : function(val) {
if(val){
return 'Ja';
}else{
return 'Nein';
}
},
},{
header: 'Beschreibung',
dataIndex: 'description',
hidden: true,
menuDisabled : true
}],
bbar: ['->'],
features: [searching/*, groupingFeature*/],//comment this in when want to group
selModel: new Ext.selection.RowModel()
});
var myPanel = new Ext.Panel({
title: 'Meine Fälle',
padding: '0 5 0 5',
bl_id:'my',
layout: {
type: 'vbox',
align: 'stretch'
},
items : [grid, southPanel]
});
return {
that : myPanel,
contentPanel: contentPanel,
grid: grid,
store: store,
toGfBtn:toGfBtn,
journalPanel:journalPanel,
commentBtn:commentBtn,
southPanel:southPanel,
abbruchBtn:abbruchBtn,
parkBtn:parkBtn
}
};
and:
var createAllPanel = function() {
var store = new Ext.data.Store({
/*sorters: ['gemeinde','assigned_to'],
groupField: 'gemeinde',*///comment in when want enable grouping
model : 'Issue',
autoLoad: true,
autoSync: true,
proxy : {
type : 'rest',
url : '/issues.json',
reader : {
type : 'json',
root : 'issues'
},
extraParams : runtime.CView.Model.getParams('all')
}
});
var groupingFeature = new Ext.grid.feature.Grouping({
groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
});
var searching = new Ext.ux.grid.feature.Searching({
minChars: 3,
mode: 'local',
searchText: 'Suche einschränken',
selectAllText: 'Alle Felder (ab)wählen',
searchTip: '',
minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
width: 200
});
var commentBtn = new Ext.Button({
text: 'Kommentar zum gewählten Ticket erfassen',
disabled: true,
ticket: null,
margin: 5
});
var toGfBtn = new Ext.Button({
text: 'an GIS-Fachstelle melden',
disabled: true,
ticket:null,
margin: 5
});
var abbruchBtn = new Ext.Button({
text: 'als abgebrochen melden',
disabled: true,
ticket:null,
margin: 5
});
var parkBtn = new Ext.Button({
text: 'Ticket zurücklegen',
disabled: true,
ticket:null,
margin: 5
});
var journalPanel = new Ext.Panel({
title: 'Kommentare',
html:'',
border: false,
autoScroll: true,
flex: 30,
padding: '5 5 5 5'
});
var buttonPanel = new Ext.Panel({
padding: '30 30 10 30',
border: false,
flex: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
});
var contentPanel = new Ext.Panel({
title : 'Beschreibung',
border: false,
html:'',
flex: 50,
padding: '5 5 5 5'
});
var southPanel = new Ext.Panel({
padding: '0 0 5 0',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 30,
items:[contentPanel, journalPanel, buttonPanel]
});
var grid = new Ext.grid.Panel({
store : store,
autoScroll : true,
flex: 70,
columns : [{
text : 'Ticket-Nummer',
width : 100,
sortable : true,
dataIndex : 'id',
menuDisabled : true
}, {
text : 'Abgabe-Datum',
sortable : true,
width : 100,
dataIndex : 'due_date',
menuDisabled : true
}, {
header : 'Thema',
width : 200,
sortable : true,
dataIndex : 'subject',
renderer : function(val) {
return '<div style="white-space:normal !important;">'
+ val + '</div>';
},
menuDisabled : true
}, {
header : 'Gemeinde',
width : 200,
sortable : true,
dataIndex : 'gemeinde',
menuDisabled : true
}, {
header : 'Parzelle',
width : 200,
sortable : true,
dataIndex : 'parzelle',
menuDisabled : true
}, {
header : 'zugewiesen an',
width : 200,
sortable : true,
dataIndex : 'assigned_to',
menuDisabled : true
}, {
header : 'zurückgelegt',
width : 200,
sortable : true,
dataIndex : 'parked',
menuDisabled : true,
renderer : function(val) {
if(val){
return 'Ja';
}else{
return 'Nein';
}
},
},{
header: 'Beschreibung',
dataIndex: 'description',
hidden: true,
menuDisabled : true
}],
bbar: ['->'],
features: [searching/*, groupingFeature*/],//comment this in when want to group
selModel: new Ext.selection.RowModel()
});
var allPanel = new Ext.Panel({
title: 'Alle Fälle',
padding: '0 5 0 5',
bl_id:'all',
layout: {
type: 'vbox',
align: 'stretch'
},
items : [grid, southPanel]
});
return {
that : allPanel,
contentPanel: contentPanel,
grid: grid,
store: store,
toGfBtn:toGfBtn,
journalPanel:journalPanel,
commentBtn:commentBtn,
southPanel:southPanel,
abbruchBtn:abbruchBtn,
parkBtn:parkBtn
}
};
As you can see the 2 panels are manly the same. When I load the page the request is started automaticly cause the stores have auto load set to true. Now the first store loads the data very well. All is fine and works like expected. What ever. The second store don't. I stalked it down to the following via firebug:
Store is created
store is bound correctly to proxy
the load function is called
data request is done
data looks perfectly like it should
I can inspect the answerd objects via firebug
Only the objects (which are in the browsers ) are not 'loaded' in the store. Store data items keep zero. Also after reload it again. I can't see the point here.
Something to mention: first store has around 50 items to hold the second one 220 or more. I tried to set the time out seeting for the proxy. Didn't help. I Also tried to switch the stores. Set store one to grid 2 and vice versa (it is steered by the extra params setting in the proxy). Only the store with the less amount of items loads well.
Does someone know this issue? I can't come to a conclusion for days now.
check out Proxy Configuration from Sencha's docs.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json-cfg-totalProperty
and your json is not in valid json format, verify it in json viewers for errors.
EDIT: You can listen to exceptions thrown by the data reader: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-event-exception
I created an editable grid with local data from Array Store. Now I put an actionColumn to delete the record from the store. But the delete is not happening and the record is still present.
Please see my code below:-
this.empdata = [
[ 'Anea etet','andreeas#jhggf.com','active' ],
[ 'Bharfdna ivasdsh','bfanas#dsgfsd.com','active' ],
[ 'Crfg gfdgdtt', 'ffigh#dfsd.com', 'away' ],
[ 'Gfdgdis Perron','geffgsp#fdhd.com', 'away' ]
];
this.employee = new Ext.data.ArrayStore({
autoSync: true,
fields : [ {
name : 'name'
}, {
name : 'email'
}, {
name : 'status'
}],
data : this.empdata
});
var cm = new Ext.grid.ColumnModel([{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
header: 'Status',
dataIndex: 'status',
editor: {
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 50,
items: [
{
icon : 'src/images.jpg',
tooltip: 'Delete record',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Delete " + rec.get('name'),function(btn,text){
if (btn == 'ok'){
grid.getStore().removeAt(rowIndex);
grid.getStore().sync();
}
})
}
}]
}]);
this.grid = new Ext.grid.EditorGridPanel({
store: this.employee,
cm: cm,
xtype: 'editorgrid',
title: 'Employee Data',
clicksToEdit: 1,
frame: true,
stripeRows : true,
width: 1000,
height: 500,
region: 'south',
viewConfig : {
forceFit : true,
scrollOffset : 0,
}
});
this.grid.on('validateedit', function(e) {
if (e.field === 'status'){
if(!((e.value === 'active')||(e.value === 'away')||(e.value === 'offline'))){
e.cancel = true;
e.record.data[e.field] = e.originalValue;
}
}
});
var win = {
layout: {
type: 'vbox',
align: 'center',
pack: 'top',
padding: 30
},
items: [this.grid]
};
Ext.apply(this, win);
When i click on delete button,a pop-up comes up asking fro confirmation.When I click 'ok' it should delete the record,but nothing happens.
Please suggest what's wrong with the code.
You use alert in yor handler it only accepts one parameter - message. If you want confirm, the best way is to use Ext.Msg.confirm. Example:
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.confirm(
"Delete " + rec.get('name'),
"Delete " + rec.get('name'),
function(btn){
if (btn == 'yes'){
grid.getStore().removeAt(rowIndex);
grid.getStore().sync();
}
}
);
}
I'm new to sencha touch and I am trying to create a container divided into 3 parts. The 2nd part should hold a carousel component. This is my code:
var con = new Ext.Container({
width: '100%',
height: '100%',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
flex: 1,
html: 'First',
items: [
{
xtype: 'carousel',
defaults: {
layout: 'hbox'
},
items: [
{
html: '1',
cls: 'card'
},
{
html: '2',
cls: 'card'
}
]
}
]
},
{
flex: 2,
html: 'Second'
},
{
flex: 3,
html: 'Third'
}
]
});
the result shows the 3 component parts apart from the carousel. What have I done wrong? Many thanks.
A couple of things:
1 - You dont need a container (first) to hold the carousel because it extends container
2 - when you use html you are setting the body of the container so any components you add will not show up
This should work with Sencha Touch 2 (havent tested with Touch 1):
var con = new Ext.Container({
width: '100%',
height: '100%',
layout:{
type: 'vbox',
align: 'stretch'
},
items:[{
xtype: 'carousel',
defaults: {
layout: 'hbox'
},
flex: 1,
items:[{
html: '1',
cls: 'card'
},{
html: '2',
cls: 'card'
}]
},{
flex: 1,
html: 'Second'
},{
flex: 1,
html: 'Third'
}]
});