We Keep Coding

JavaScript override only specified options from a list of default options belonging to an object

I want to create an object that has default options it resorts to unless certain options are specified by the user. The user can define any of the optional values as an array in any order and the values that haven't been defined by the user will instead take on the values defined in defaultOptions array.
In this case, the user wants to override the width and height of a Chart object only, while all the other defaultOptions will remain as defined in the class.
From my example, it doesn't seem to change the width and height to the user specified values, but instead uses the defaultOptions values.
class Chart {
constructor(div, data, options = {}) {
let defaultOptions = {
mode: "bar-chart",
width: div.clientWidth,
height: div.clientHeight,
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10
},
name: "Default Chart"
}
this.options = Object.assign({}, defaultOptions, options);
}
}
/* create Chart object /
/ should override defaultOptions array width and height with these new values */
let chart = new Chart(div,{
width: 400,
height: 400,
});
/* alternatively, could create a Chart object with only mode value change */
let chart = new Chart(div,{
mode: "pie-chart"
});
The answer should use vanilla Javascript, please!

One problem, and one thing to watch out for:
Your parameters are misaligned. You are sending your options as data. See below for an added data parameters when constructing.
Watch out for the nested objects if you want the caller to be able to apply individual margin properties. See below for one example of how to allow overriding only one margin property and keeping the others as default.
class Chart {
constructor(div, data, options = {}) {
let defaultOptions = {
mode: "bar-chart",
width: div.clientWidth,
height: div.clientHeight,
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10
},
name: "Default Chart"
}
this.options = Object.assign(
{},
defaultOptions,
options,
{margin: Object.assign(
defaultOptions.margin,
options.margin || {}
)}
);
}
}
/* create Chart object /
/ should override defaultOptions array width and height with these new values */
let chart1 = new Chart(div1, {}, {
width: 400,
height: 400,
});
/* alternatively, could create a Chart object with only mode value change */
let chart2 = new Chart(div2, {}, {
mode: "pie-chart",
margin: {bottom: 7},
});
console.log(chart1, chart2);
<div id="div1" style="width: 317px; height: 321px; background-color: blue;">
<div id="div2" style="width: 172px; height: 251px; background-color: green;">

Making custom chrome app top bar

I am making a chrome app and this is my background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false
});
});
I want to know how to make it so when I run the app, the top bar where you can close the app is a different color. I also want to know how to show text on the top bar with a different color.

The top bar is part of the window's frame.
You can supply a FrameOptions object to create():
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false,
'frame': { /* ... */ }
});
});
You have 2 broad options:
You can keep the default system frame, and have (minimal) customization options: specifically, you can control the frame's color. See this sample.
'frame': { 'color': "#ff0000" }
Optionally, it can be different when active/inactive. See the documentation for appropriate format. You can't control the text color this way.
You can completely disable the OS-supplied frame, and build your own - but you'll need to provide your own controls (e.g. a close button) and draggable areas. See this sample.
'frame' : { 'type' : 'none' }

try this:
innerBounds: {
width: ,
height: ,
minWidth: ,
maxWidth: ,
minHeight: ,
maxHeight:
}

jqgrid - how to center delete action icon

I don't know how to center delete action icon in inline editing.
My setting action column is:
{
name: 'action',
width: 40,
align: "center",
editable: false,
formatter:'actions',
search: false,
fixed: true,
resize: false,
formatoptions: { keys: true, editbutton: false }
}

You need to play around with CSS to find the fix in your case. Try overriding jqGrid's CSS rules.
In general, if you have only 'Delete' icon in your column, following CSS rules will make it center aligned.
.ui-pg-div.ui-inline-del {
float: none !important;
}
span.ui-icon.ui-icon-trash {
margin: auto;
}
Although, its not a good practice to use '!important'.
If you want to do this for a particular grid, you can prepend grid id(say, list) to CSS rule like this:
#list .ui-pg-div.ui-inline-del{}

Extjs4 fieldset.show() and fieldset.hide() is not a function issue

I have a problem with fieldsets show and hide functions.
In my app at the left side I have a combobox with change listener. At the right side I have several different textfields which are showing and hiding according as chosen value in combobox.
Every hide and show functions are working with fieldsets, but if I can't to show/hide fieldset. Fieldset reference is visible, I can list this component with console.log() function.
Here's a piece of my code:
var rigthPanelLeftContainer = {
flex: 1,
minWidth: 200,
defaults: {
xtype: 'textfield',
minWidth: 180,
anchor: '100%'
},
items: [
//some working textfields here
{
xtype: 'fieldset',
labelWidth: 160,
anchor: '100%',
height: 40,
itemId: 'remarkId',
title: 'title'],
hidden : !ifHideIt, //boolean
items: [{
xtype: 'text',
height: 25,
text: 'sometext']
}]
}
]};
var comboBoxConnectors = {
xtype: 'combobox',
fieldLabel: Ext.translations.map['field.label.common'],
store: Ext.state.Manager.get('conTypes'),
editable: false,
queryMode: 'local',
name: 'conType',
itemId: 'conTypeField',
value: connObj === null ? conTypes[0] : connObj.type,
labelWidth: 160,
anchor: '100%',
listeners: {
change: function(obj, newValue, oldValue) {
//many hide/show working on textfield functions
var remarkId = me.query('#remarkId');
console.log(remarkId); //returns my fieldset element
remarkId.hide(); //returns remarkId.hide is not a function
}
}
}
I really need your help guys, whats wrong with this?

In your code, you have a comment that says that me.query( '#remarkId' ) returns your fieldset element. This is not technically correct. Assuming that me.query() is a component query, what you are actually getting in return is an array of matched components. So then, you're getting the undefined function error because, most definitely, an array does not have a hide() method. If you access the first element in the array and then call the hide() method, it should work.
However, you should probably also consider going about this a bit differently. Instead of getting an array of elements with query() (which may always be one, but not necessarily...), you could use the built in traversal methods to find the correct component. For example, assuming that the combobox and the fieldset are both children of the same form panel, you could do something like this: mycombobox.up( 'form' ).down( 'fieldset#remarkId' ). This basically instructs the code to traverse up the component hierarchy to the nearest form, then to drill down to the first descendant of the form that is a fieldset with the itemId of "remarkId". This will only ever give you a single component as a result, so you don't have to bother with accessing a component out of an array of components.

Removing headertoolbar of GridPanel in Extjs

I have a GridPanel in Extjs and i just want to remove or hide its header toolbar. (The toolbar where the title and the searchbox is in). I just want the Gridpanels first element to be the column headers. How can I do it?

hideHeaders property of Ext.grid.GridPanel does the trick.
var grid = new.Ext.grid.GridPanel({
store: store,
hideHeaders: true,
width: 200,
height: 100,
}

Have you tried setting the header config option to false? See below example:
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
header: false,
renderTo: 'mygrid',
width: 600,
height: 300
});

If you can't find a suitable config option, calling gridPanel.getTopToolbar().hide() afterwards should do the trick.