We Keep Coding

How to make ExtJS closabel component

My requirement is that I need one container with "X" in top right corner of container. On click of X the container should get disappear. Logic is not a problem for me.I want a container with "X" on top right.
Here is what I am trying
var myBtn =Ext.create('Ext.Button', {
text: 'x',
handler: function() {
/*this.container.component.removeAll();
this.container.component.updateLayout();*/
}
});
myFields.push(me.getField(selectedRecord));
myFields.push(btn);
me.add({
xtype: 'container',
margin: '0 6',
draggable: true,
reorderable: true,
height: 50,
items: dropField,
listeners: {
render: function() {
new Ext.dd.DragDrop(this.body, "myGrp");
}
}
});
in `getField` method I am getting "textfield component". Can anybody help me to get that closable container. I am trying with panel but there I am getting only "X". textfield component is missing.

Try to use panel component with closable property

Remove horizontal scrollbar under fixed columns DataTables

I'm combining a complex header and fixed columns:
1) complex header: https://datatables.net/examples/basic_init/complex_header.html
2) fixed columns: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
It works fine but is there a way to remove the scrollbar from the fixed header columns? I've outlined the bit I'd like to remove.
Basically, I want to make it like this: https://jsfiddle.net/brianlmerritt/8c5jgs4b/ but with DataTables and complex header.
Here's my own fiddle: https://jsfiddle.net/omgLswq6/151/
$(document).ready(function () {
$('#compareResults').DataTable({
paging: false,
ordering: false,
info: false,
scrollX: true,
fixedColumns: {
leftColumns: 5
}
});
});

I was able to resolve this by changing the overflow style to be hidden in the fixed left column container:
.DTFC_LeftBodyLiner {
overflow: hidden;
}
<div class="DTFC_LeftBodyLiner">
<table class="foo_datatable">
...
</table>
</div>

Set width to dojox/form/CheckedMultiSelect

I was trying to set the style of a dojox form CheckedMultiSelect control. First I tried to use the .set method. The physical width has changed, but the control is still automatically sized to the max. length of dropdown items.Second, I tried the way from this post -How to set width to dojox/form/CheckedMultiSelect?. And it didn't do anything.
var groupCheckedMultiSelect = new CheckedMultiSelect ({
id: "groupChkMultiSelect",
dropDown: true,
multiple: true,
class: 'narrow',
label: "Group"
}, 'GroupDiv');
groupCheckedMultiSelect.set('style', {width: '100px', height: '30px', fontSize: '14px'});
groupCheckedMultiSelect.startup();
.narrow .dojoxCheckedMultiSelectWrapper {
width: 1000px;
}

Try Setting
.dojoxCheckedMultiSelectButton{
width:400px
}
Fiddle:http://jsfiddle.net/theinnkeeper/4L3sksmt/1/

Background color does not change after assigning color code in getRowClass at viewConfig property

Here, is JavaScript in which I am setting background color on those field which contain different data in BusinessObject column and CustomTable column.
projectgrid= new Ext.grid.GridPanel
({
id:projectgrid,
cm : projectInfoFieldsCM,
store: inlineGridStore,
stripeRows: true,
autoScroll:true,
width:550,
height:500,
bodyCssClass : 'customInlineGridCSS',
viewConfig:
{
forceFit: false,
autoFill : false,
deferEmptyText : false,
emptyText : '<div align="center"><span style="font-size: 9pt; font-weight: normal">No record available</span></span></div>',
getRowClass: function(record, index, rowParams, store) {
if(record.get('BusinessObject')!=record.get('CustomTable')){
return 'gender-male';
}
}
}
});
Here, Is css file in which I have assign color coding.
Note : I tried both ID which are declared in css file.
.data-row-light-red
{
background-color: #ff0000 !important ;
}
.gender-male .ID {
background-color: #088da5;
}
Am I doing something wrong because I have implemented this functionality before but I am stuck in this one?

Maybe not want you exactly need but I already done something similar with renderer function in the column, maybe you going to be able to use that too?
Here is my code:
columns: [
{header: "Color", dataIndex: "COLOR", width:100,
renderer:
function(value, metaData, record, rowIndex, colIndex, store){
metaData.style = "background-color: rgb(255,255,255);";
return "";
}
},
Hope this helps

You need to separate class selectors using comma
Try this
.gender-male, .ID
{
background-color: #088da5;
}
Or
.gender-male
{
background-color: #088da5;
}
If you don't need ID class anywhere

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.