Develop Reference

node.js - blessed textarea give repeat text

i am trying to make a chatroom app with blessed, here is my code:
index.js
const blessed = require('blessed')
const EventEmitter = require('events')
// Create a eventemitter
var chatroom = new EventEmitter()
// Create a screen object.
var screen = blessed.screen({smartCSR: true, dockBorders: true})
screen.title = 'chatroom'
screen.key(['C-c', 'escape'], () => { // exit
return process.exit(0)
})
var chatarea = blessed.box({
parent: screen,
top: 0,
title: 'chatroom',
width: '100%',
height: '100%-2',
tags: true,
border: {
type: 'line'
},
style: {
fg: 'white',
}
})
var form = blessed.form({
parent: screen,
bottom: 0,
width: '100%',
height: 3,
keys: true,
border: {
type: 'line'
}
})
var input = blessed.textarea({
parent: screen,
bottom: 1,
left: 1,
width: '100%',
height: 1,
input: true,
focused: true,
inputOnFocus: true,
tags: true,
});
input.focus()
screen.append(chatarea)
screen.append(form)
screen.append(input)
screen.render()
but it always repeat all the key i am typing, for example: if i type 'hello', it will show hheelllloo like this:
it will repeat all the chars, how can i fix this? thx

You can just move input.focus() after screen.render()

Multiple horizontal lines displayed between set of dynamically created tables

I am facing one issue while inserting horizontal line on the fly (i.e. at the time of creating dynamic tables).
As you can see from the code snippet below:
1) If you click on any row of the first table/grid, a horizontal line is shown below it and a new table is shown
2) If I click on any row of second grid/table ,everything looks good and a horizontal line is shown and a 3rd grid/table is shown
3) Click on 3rd grid , 4th grid is shown and a horizontal line. But when you click on 4th grid, you will notice an additional horizontal line getting added just above the grid as shown in the screenshot
(highlighted) below:
Could anyone tell me why this is happening?
I am trying to accomplish this using an additional variable hll in the code. Not sure if it's redundant to use hll or I could use hl for the same purpose?
var hll = document.createElement('div');
hll.id = 'newhorizLine';
hll.style.margin = "25px 0";
hll.style.height = "1px";
hll.style.background = "black";
hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
Please consider the code snippet below :
var source = {
localdata: [
["Test1", "2018-08-29 14:19:07", "2020-08-29 14:19:07", "Path1"],
["Test2", "2018-09-05 11:26:39", "2020-09-05 11:26:39", "Path2"],
["Test3", "2018-08-30 07:32:23", "2020-08-30 07:32:23", "Path3"],
["Test4", "2018-09-11 09:01:42", "2020-09-11 09:01:42", "Path4"],
["Test5", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path5"],
["Test6", "2018-08-01 15:28:22", "2020-08-01 15:28:22", "Path6"],
["Test7", "2018-09-13 07:34:57", "2020-09-13 07:34:57", "Path7"]
],
datafields: [{
name: 'dataSetName',
type: 'string',
map: '0'
},
{
name: 'accessStartDate',
type: 'date',
map: '1'
},
{
name: 'accessEndDate',
type: 'date',
map: '2'
},
{
name: 'conceptPath',
type: 'string',
map: '3'
}
],
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function(data) {},
loadError: function(xhr, status, error) {}
});
$("#main_downloader_grid").jqxGrid({
source: dataAdapter,
width: 381,
height: '200',
pageable: true,
sortable: true,
autoheight: true,
columnsResize: true,
theme: 'classic',
columns: [{
text: 'Data Set',
datafield: 'dataSetName',
width: 140
},
{
text: 'Start Date',
datafield: 'accessStartDate',
width: 120,
cellsformat:'MM/dd/yyyy'
},
{
text: 'End Date',
datafield: 'accessEndDate',
width: 120,
cellsformat:'MM/dd/yyyy'
},
{
text: 'Concept Path',
datafield: 'conceptPath',
width: 50,
hidden: true
}
]
});
// Row Select Logic Starts Here
$("#main_downloader_grid").on("rowselect", function(e) {
let data_set_name = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'dataSetName');
console.log("Cell Value Test");
console.log(data_set_name.value);
let conceptPath = $("#main_downloader_grid").jqxGrid('getcell', e.args.rowindex, 'conceptPath');
console.log("Concept Path Test");
console.log(conceptPath.value);
$('#commonWindow').remove();
//$('.clickable').remove();
$('.clickable').next('#testbutton').remove();
$('.clickable').slice(1).remove();
var elem = document.createElement('div');
elem.id = 'commonWindow';
//elem.setAttribute('style', 'margin:500px 10px 20px 20px;');
console.log(elem);
let data = [{
letter: '<b>People</b>'
},
{
letter: '1) Detailed demographics data of all people'
},
{
letter: '2) Attributes associated with all people'
},
{
letter: '<b>Technology</b>'
},
{
letter: '1) Computer details'
},
{
letter: '2) Hardware Details'
},
{
letter: '3) Software Details'
},
{
letter: '<b>Company Details</b>'
}
/* {conceptpath: conceptPath.value } */
];
let source = {
localdata: data,
datatype: "array",
datafields: [{
name: 'letter',
type: 'string'
} /* ,{ name: 'conceptpath', type: 'string' } */ ]
};
let newDataAdapter = new $.jqx.dataAdapter(source);
$(elem).jqxGrid({
source: newDataAdapter,
width: 395,
height:310,
columns: [{
text: 'Data set <b>' + data_set_name.value + '</b> selected, what data do you want to see?',
datafield: 'letter'
//width: 450
}
]
});
$(elem).insertAfter('#main_downloader_grid');
elem.style.margin = "50px 10px 20px 50px";
var hl = document.createElement('div');
hl.id = 'horizLine';
hl.style.margin = "25px 0";
hl.style.height = "1px";
hl.style.background = "black";
hl.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
$(hl).insertAfter('#main_downloader_grid');
var hll = document.createElement('div');
hll.id = 'newhorizLine';
hll.style.margin = "25px 0";
hll.style.height = "1px";
hll.style.background = "black";
hll.style.background = "-webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black))";
$("#commonWindow").on("rowselect", handleClick);
function handleClick(e) {
var $el = $("<div />", {
class: "clickable",
style: "margin:100px 10px 20px 20px ",
})
.on('click', handleClick)
$el.jqxGrid({
height: 270,width:520, pageable: true,source: dataAdapter, columns: [
{ text: 'Data Set Name', datafield: 'dataSetName', width: 200 },
{ text: 'Access Start Date', datafield: 'accessStartDate', width: 150,cellsformat:'MM/dd/yyyy' },
{ text: 'Access End Date', datafield: 'accessEndDate', width: 150,cellsformat:'MM/dd/yyyy' },
{ text: 'Concept Path', datafield: 'conceptPath', width: 100,hidden:true }
]
});
$(hll).insertAfter(".clickable");
var $this = $(this), $parent = $(this).parent();
if (e.type == 'rowselect') {
$('.clickable').next('#testbutton').remove();
$('.clickable').next('#newhorizline').remove();
$('.clickable').slice(1).remove();
}
var $button = $("<div id = 'testbutton'></div>").on('click', function (e) {
$(".clickable").jqxGrid('exportdata', 'csv', 'jqxGrid');
});
console.log($button);
$button.jqxButton({ width: 100, height: 20});
$button.html('Download Data');
$el.after($button);
$parent.append($el);
$(this).off('click');
}
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="wrapper">
<div id="main_downloader_grid" style="margin:50px 10px 20px 50px"></div>
<div class="clickable" style="margin:50px 10px 20px 20px;"></div>
</div>

While, I am not exactly sure what you are try to accomplish, you can get horizontal lines without css using the tag in html!
<h2>Hello!</h2>
<hr>
<h3>Hi, Tim!</h3>

prevent window from overlapping other visible windows

I'm dealing with a panel that have several windows inside it.
Is there a way for the windows to not overlap each other when they are re-positioned by the user?
What class/es should I work on?
Here is a very discrete sample to work on. http://jsfiddle.net/jopantorilla/XFC6P/1/
Ext.onReady(function () {
var window1, window2;
var parentWindow = Ext.create('Ext.window.Window', {
title: 'Parent Window',
layout: 'fit',
width: 500,
height: 450,
items: [
window1 = Ext.create('Ext.window.Window', {
title: 'Window 1',
id: 'window1',
width: 150,
height: 150,
x: 50,
y: 100,
constrain: true
}),
window2 = Ext.create('Ext.window.Window', {
title: 'Window 2',
id: 'window2',
width: 150,
height: 150,
x: 300,
y: 100,
constrain: true
})]
}).show();
window1.show();
window2.show();
});

Use the WindowManager to control the behavior of the overlap.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.WindowManager

Create table like structure using Extjs

In Extjs 4.1.1a, I am trying to create a table like structure using containers or panels which completely stretches horizontally and vertically to its parent component.
Here is the Example Fiddle
In View:
Ext.define("MyApp.view.Main", {
extend: 'Ext.panel.Panel',
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
id: 'mainContainer'
})
In Controller:
var items = [];
for(var i=0;i<6;i++){
var vContainer = [];
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
flex:1,
})
}
vContainer.push({
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
items: hContainer
})
}
var mainController = Ext.getCmp('mainController'); //Calling the id here
mainController.add(items); //adding the items variable which is mentioned above
I am not sure why this ain't working (not showing anything). Please assist me to solve this problem.

Fiddle
You're pushing an array into an array and passing it as items in the main panel:
Here's the fixed code:
var items = [];
for(var i=0;i<6;i++){
var vContainer; //THE PROBLEM - NO NEED FOR IT TO BE AN ARRAY
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
title : 'H',
flex:1,
});
}
vContainer = {
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
title : 'V',
items: hContainer
}
items.push(vContainer);
}
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
minHeight : 500,
minWidth : 500,
items: items
})

Edit: Was too late, leaving the example here anyway.
You're building it wrong:
/*****************************************/
var items = [];
for(var i=0;i<6;i++){
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
flex:1
});
}
items.push({
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
items: hContainer
});
}
/*****************************************/
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
height: 400,
items: items
});
Here's the fiddle: http://jsfiddle.net/johanhaest/ptZp7/

ExtJS: Dynamically add item to viewport region

Let's say I have a JS in one file that creates a Viewport:
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center'
},
...
]
});
Now let's say I have another JS file that loads subsequently with this component definition:
{
contentEl: 'content',
height: '100%'
}
How do I add that component with contentEl: 'content' to the 'center' region?

var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center',
id:'centerViewPortId'
}
]
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
renderTo: Ext.getBody()
});
viewPort.getComponent('centerViewPortId').add(contentEl);
});

var viewpoert = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
anoter file;
var contentEl = Ext.Create('Ext.Something.What.You.Want', {
region: "center"
});
finally:
viewport.add(contentEl);

This link still came up top of the search results for Google, so I thought I'd add another neat solution:
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
region: 'center',
renderTo: Ext.getBody()
});
viewPort.add(contentEl);
});