I am using the YUI Rich Editor (SimpleEditor) which gives an editor that has a heading that says "Text Editing Tools" and a +/- button that shows/hides the editing tools. I don't need this, how can I hide them or disable these features?
Thanks!
Add this CSS to the page:
.yui-skin-sam .yui-toolbar-container .yui-toolbar-titlebar {
display: none;
}
For future reference, YUI support is here: http://yuilibrary.com/forum/
You (I) can use a configuration like this:
var myConfig = {
height: '300px',
width: '522px',
toolbar: {
collapse: false,
titlebar: '',
draggable: false,
buttons: [
{ group: 'textstyle', label: 'Font Style',
buttons: [
{ type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' },
{ type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' },
{ type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' },
{ type: 'separator' },
{ type: 'color', label: 'Font Color', value: 'forecolor', disabled: true },
{ type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }
]
},
{ type: 'separator' },
{ group: 'indentlist', label: 'Lists',
buttons: [
{ type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' },
{ type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' }
]
}
]
}
};
Related
I started learning ExtJS recently.I created a grid with columns(names,email , phone) and added some dummy data using store. Here column -("names") is editable column. when user sees that grid , he should come to know that (names) column is editable. For this I needed to add edit symbol( iconCls: 'fa fa-edit' fontawesome) to the right side of data in each column under "names" header,so that user can come to know that that column is editable.How can I achieve this.Please help me with this,I tried a lot but did not found a solution.Thanks in advance.
ExtJS grid code:
Ext.define('FirstApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
columnLines: true,
requires: [
'FirstApp.store.Personnel',
'Ext.grid.filters.Filters'
],
title: 'Personnel',
collapsible: true,
iconCls: 'icon-grid',
frame: true,
width: 700,
height: 500,
resizable: true,
plugins: 'gridfilters',
emptyText: 'No Matching Records',
loadMask: true,
stateful: true,
stateId: 'stateful-filter-grid',
store: {
type: 'personnel',
autoLoad: true,
autoDestroy: true
},
tbar: [{
text: 'Show Filters...',
tooltip: 'Show filter data for the store',
handler: 'onShowFilters'
}, {
text: 'Clear Filters',
tooltip: 'Clear all filters',
handler: 'onClearFilters'
}],
columns: [
{ text: 'Name', dataIndex: 'name',flex:1,
align: 'center',
editor: {
xtype: 'textfield',
allowBlank: false
},
filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
} }},
{ text: 'Email', dataIndex: 'email', flex: 1,filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
} }},
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
refer Grid image with arrowd indication where that editable fontawesome should appear
I found solution for this problem.
To which column we want to add edit image on the rightside of data it gets from store,so as to indicate that it is a editable column.
1). make the column firstly as "widgetcolumn" and make the changes in grid as follows:
//grid column code example:
columns: [
{ text: 'Name',
dataIndex: 'name',
width: 200,
xtype: 'widgetcolumn',
cls:'x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small',
sortable: true,
widget:{
textAlign:'left',
iconCls:'x-fa fa-edit',
iconAlign: 'right',
xtype:'button',
handler: function(btn) {
var rec = btn.getWidgetRecord();
}
},
align: 'center',
editable:true,
editor: {
xtype: 'textfield',
allowBlank: false
},
filter: {
type: 'string',
itemDefaults: {
emptyText: 'Search for...'
} }}]
2). changes in css file to change color of button
.x-button-default-small-cell > .x-grid-cell-inner >.x-btn-default-small {
vertical-align: top;
border-color: transparent;
background-color: transparent;
}
3). refer image of grid after changes
I like to reverse engineer the following highcharts chart: Bitconnect
This is so I can better calculate my intrest on that site.
Thank you
Dev tools -> source -> found element id -> searched source for id -> found code below.
$('#highchartload-closing-day').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: ''
},
subtitle: {
text: 'Click and drag in the plot area to zoom in'
},
xAxis: [{
categories: date,
type: 'datetime',
crosshair: true
}],
yAxis: [{
labels: {
format: '{value} %',
style: {
color: '#FA890F'
}
},
title: {
text: 'Rate of interest',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
series: [{
name: 'Rate of Interest',
type: 'column',
yAxis: 0,
data: rate_of_interest,
color: '#FFC46D',
tooltip: {
valueSuffix: ' %'
}
}]
});
I need to initial grid which will showed only 10 records, although it is more, the rest should be hidden, for example there will be a button under grid which on click, will display all the rest. Prompt way as it can be implemented. P.S. : extjs 5.0.1
Two ways of doing this. First is to specifically set a property on each record to say that it should be hidden initially, then use a filter on the store to ensure they are not shown:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', 'hidden'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", hidden: false },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", hidden: false },
{ 'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244", hidden: true },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", hidden: true }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
},
filters: [{ property: 'hidden', value: false }]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
bbar: [{
xtype: 'button',
text: 'Show All Rows',
handler: function() {
store.clearFilter();
}
}]
});
}
});
Another approach is to filter on the index of the items in the store:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', 'hidden'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224", hidden: false },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234", hidden: false },
{ 'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244", hidden: true },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254", hidden: true }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
store.addFilter([
function(item) {
return store.indexOf(item) <= 1;
}
]);
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
bbar: [{
xtype: 'button',
text: 'Show All Rows',
handler: function() {
store.clearFilter();
}
}]
});
}
});
Here we use the indexOf method on the store instance to filter out anything past index 1 in the store.
I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.
I am new to Scencha. I am using a bar chart example of Scencha charts. I could not change colors of the charts, it comes by default. Where can I change the color in the following code? How can I transpose bar chart also, it comes as left to right?
var barChart = new Ext.chart.Panel({
title: 'Bar Chart',
layout: 'fit',
iconCls: 'bar',
dockedItems: {
iconCls: 'shuffle',
iconMask: true,
ui: 'plain',
handler: onRefreshTap1
},
items: [{
xtype: 'chart',
cls: 'barcombo1',
theme: 'Demo',
store: store1,
animate: true,
shadow: false,
legend: {
position: {
portrait: 'right',
landscape: 'top'
}
},
interactions: [
'reset',
'togglestacked',
{
type: 'panzoom',
axes: {
left: {}
}
},
{
type: 'iteminfo',
gesture: 'taphold',
panel: {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Details'
}],
html: 'Testing'
},
listeners: {
'show': function(me, item, panel) {
var storeItem = item.storeItem;
// panel.update('<ul><li><b>Month:</b> ' + storeItem.get('name') + '</li><li><b>Value: </b> ' + storeItem.get('2008') + '</li></ul>');
}
}
},
{
type: 'itemcompare',
offset: {
x: -10
},
listeners: {
'show': function(interaction) {
var val1 = interaction.item1.value,
val2 = interaction.item2.value;
barChart.descriptionPanel.setTitle('Trend from ' + val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
barChart.headerPanel.setActiveItem(1, {
type: 'slide',
direction: 'left'
});
},
'hide': function() {
barChart.headerPanel.setActiveItem(0, {
type: 'slide',
direction: 'right'
});
}
}
}],
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['TY', 'LY'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Hits (Billions)',
minimum: 0
},
{
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Weeks'
}],
series: [{
type: 'bar',
label: {
Field:'TY'
},
xField: 'name',
yField: ['TY', 'LY'],
axis: 'bottom',
highlight: true,
showInLegend: true
}]
}]
});
Change the type 'bar' to 'column' in the following snippet:
series: [{
type: 'bar',
label: {
Field:'TY'
},