i am working in extjs4. I have Ext.menu.Menu with dataview as item. I have code for this as=
var projectTpl = new Ext.XTemplate(
'<tpl for=".">',
'<table id="table" class="project">' ,
'<tr width=\"100%\">',
'<tpl>' ,
'<td><img id="img"></td>',
'</tpl>',
'<td style="line-height: 150%; padding-left: 5px;">' ,
'<span class="fileName"><span style = "font-weight: bold;">{projectId}</span>',
'<span class="username" style="color: #707070; font-family: VegurMedium,sans-serif; font-size: 12px;"> Approved the file<b> {projectName} </span> '+
'</td>',
'</tr>',
'</table>',
'</tpl>');
var detailsMenu = Ext.create('Ext.menu.Menu',{
items: [{
xtype: 'dataview',
autoScroll: true,
height: 250,
width : 400,
store : 'ProjectStore',
tpl:projectTpl
}]
});
I want to create submenu as "Send Email" to each of datview's item. So how to add such submenu to dataview of 'Ext.menu.menu' in extjs4
Related
I trying to use mapbox GL to render a map in React.
I've diveide my screen in 4(2 col/crow) with Grid with the following css:
.container {
font-family: sans-serif;
margin: 0;
display: grid;
grid-template-rows: 1fr 7fr;
grid-template-columns: auto;
gap: 5px;
grid-template-areas: "cr1 cr2"
"cr1 cr4";
height: 100vh;
width: 200vh;
background-color: chartreuse;
}
.table {
grid-area: cr1 ;
background-color: aqua;
display: flex;
justify-content: center;
align-items: center;
}
.tank-select {
grid-area: cr2;
background-color: grey;
}
.map {
grid-area: cr4;
display: flex;
justify-content:space-around;
align-items:stretch;
background-color: blueviolet;
}
i would like to have the map in the box cr4 with the following code:
<div className="container">
<div className="table">test</div>
<div className="tank-select">test2</div>
<div className="map">
<Map />
</div>
</div>
The map is compute this way:
const mapContainerRef = useRef(null)
const [lng, setLng] = useState(5)
const [lat, setLat] = useState(34)
const [zoom, setZoom] = useState(1.5)
// Initialize map when component mounts
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: zoom,
})
// Add navigation control (the +/- zoom buttons)
map.addControl(new mapboxgl.NavigationControl(), 'top-right')
map.on('move', () => {
setLng(map.getCenter().lng.toFixed(4))
setLat(map.getCenter().lat.toFixed(4))
setZoom(map.getZoom().toFixed(2))
})
// const marker = new mapboxgl.Marker().setLngLat(TankLocationArray).addTo(map)
//
map.on('load', function () {
map.addSource('route', {
type: 'geojson',
data: '../../assets/data/test.geoJSON',
})
map.addLayer({
id: 'route',
type: 'symbol',
source: 'route',
paint: {
'circle-radius': 10,
'circle-color': '#ff0000',
},
})
})
//
// Clean up on unmount
return () => map.remove()
}, []) // eslint-disable-line react-hooks/exhaustive-deps
return (
<div>
<div className="sidebarStyle">
<div>
Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
</div>
</div>
<div className="map-container" ref={mapContainerRef} />
</div>
With the css:
.map-container {
position:relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sidebarStyle {
display: inline-block;
position: absolute;
top: 0;
left: 0;
margin: 12px;
background-color: #404040;
color: #ffffff;
z-index: 1 !important;
padding: 6px;
font-weight: bold;
}
When i change the map-container position from relative to absolute, the map would take the whole screen, otherwise it's not visible.
I do not know how to style to get the map to appear only in the box .map(cr4).
thanks for the help
solved the issue using React Map GL library.
works really fine. https://www.npmjs.com/package/react-map-gl
<script>$(document).ready(function() {
$("#menu li a").on('click', function() {
var page = $(this).data('page');
$("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
$(this).addClass('hide');
$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
});
});
});
</script>
<script>$(function () {
$("#categories li, #bottom-page li").click(function (e) {
e.preventDefault();
$("#categories li, #bottom-page li").addClass("active").not(this).removeClass("active");
});
});
</script>
<script>
function goto($hashtag){
document.location = "store.html#" + $hashtag;
}
</script>
#categories {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#categories ul li {
font-size: 16px;
background-color: #f1c96c;
text-align: center;
width: 32%;
margin-top: 3em;
display: inline-block;
}
#categories ul li:hover {
background-color: #f2e860
}
#categories ul li a {
color: #112c61;
font-size: .85em;
text-decoration: none;
padding: 1em 0;
display: block;
}
.nowrap {
white-space: nowrap;
}
.hide {
display: none;
}
li.active [data-page='category-1'] {
background-color: lavender;
}
li.active [data-page='category-2'] {
background-color: lavender;
}
li.active [data-page='category-3'] {
background-color: lavender;
}
#bottom-page {
font-size: 0;
width: 86%;
position: relative;
top: 0;
left: calc(50% - 43%);
float: left;
}
#bottom-page ul { float: right; }
#bottom-page ul li {
font-size: 16px;
cursor: pointer;
width: 60px; height: 40px;
display: inline-block;
}
#bottom-page ul li a {
font-size: .85em;
text-decoration: none;
text-align: center;
line-height: 1.4;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
#bottom-page ul li:hover { background-color: #f3efb4; }
<section id="categories"><div id="top"></div>
<div id="categories-line">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" name="top" href="#">PRODUCTS <span>A - I</span></a></li>
<li><a data-page="category-2" name="top" href="#">PRODUCTS <span>J - R</span></a></li>
<li><a data-page="category-3" name="top" href="#">PRODUCTS <span>S - Z</span></a></li>
</ul>
</div>
</section>
<section id="bottom-page">
<ul id="menu" class="nowrap">
<li><a data-page="category-1" onclick="goto('top')">Page<br>1</a></li>
<li><a data-page="category-2" onclick="goto('top')">Page<br>2</a></li>
<li><a data-page="category-3" onclick="goto('top')">Page<br>3</a></li>
</ul>
</section>
I have a menu at the top of a page under my nav which separates products on the page alphabetically. This menu is made up of three tabs spanning the width of the page that go A-I, J-R, S-Z. Under the tabs are a bunch of products listed depending on which tab is chosen.
At the bottom of the page after the last product is a menu, the same as the top menu but styled differently i.e. Page 1, Page 2, Page 3. I would like to have Page 1, Page 2 and Page 3 correspond to the proper tab at the top when clicked. So that Page 1 and the first top tab are active and highlighted when either one, top or bottom, is clicked. Thank you for any help!
Your question is a lot to read, make it as short as possible.
If your code consists of HTML or CSS, it's better to use stack overflow's code snippets
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello!</h1>
<section>
<h3>Work</h3>
<ol>
<li>Technical Blogs</li>
<li>Front End Projects</li>
</ol>
</section>
</body>
</html>
I'm using Scrollmagic to have horizontal scrolling. All works fine when things scroll to the left. When I have it scroll to the right, however, after the last image is a big white space.
I am using this in my header:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
This is my html, and all the images are the same width:
<!-- horizonal scroll left ------->
<div class="wraper">
<div class="container" id='container2'>
<img src="img/demobegins.jpg" />
<div class="caption more-space-right desktop">
caption 3
</div>
<img src="img/demo-mayfair-detre-1950.jpg" />
<div class="caption more-space-right desktop">
caption 2
</div>
<img src="img/demo-exposition-buildings-ca1949-upitt.jpg" />
<div class="caption more-space-right desktop">
caption 3
</div>
</div>
</div>
<!-- end horizonal scroll left------->
css:
.wraper{
overflow-x: hidden;
}
.container{
width: 4000px;
height: 100vh;
}
#container2 {
}
.container p{
position: absolute;
top: 50%;
left: 3%;
transform: translateY(-50%);
}
#container2 img, #container2 .caption {
float: right;
}
.container .caption {
width: 200px;
margin-top: 40px;
margin-left: 20px;
margin-right: 20px;
}
.container img {
max-width: 80%;
}
jquery:
var HorzcontrollerLeft = new ScrollMagic.Controller();
var tl2 = new TimelineMax();
var elementWidth2 = document.getElementById('container2').offsetWidth;
var width2 = window.innerWidth - elementWidth2;
var duration2 = elementWidth / window.innerHeight * 100;
var official2 = duration2 + '%';
tl2
.to('#container2', 5, {x: -width, ease: Power0.easeNone});
var scene2 = new ScrollMagic.Scene({
triggerElement: '#container2',
triggerHook: 0,
duration: official2
})
.setPin('#container2')
.setTween(tl2)
.addTo(HorzcontrollerLeft);
}
Can anyone see what I'm doing wrong please?
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({
left:10,
top:10,
width:50,
height:50,
fill:'#4169e1'
}));
canvas.add(new fabric.Rect({
left:140,
top:140,
width:50,
height:50,
fill:'#800000'
}));
canvas {
border: black solid 1px;
padding: 5px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<input type='color'></input>
<canvas id="c" width="200" height="200"></canvas>
I want to be able to select an object and the input field updates with the color, AND be able to change the color of the object from the input field. I know I can do one way binding with document.getElementById("example").innerHTML and '<input type="color" value="' + canvas.getActiveObject().fill +'">', but what is the best way for two way binding?
You need to use events object:selected selection:cleared to get the selected object. And set the color picker value from selected object fill value.
DEMO
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: '#4169e1'
}));
canvas.add(new fabric.Rect({
left: 140,
top: 140,
width: 50,
height: 50,
fill: '#800000'
}));
var colorPick = document.getElementById('colorPick');
var activeSelected;
colorPick.onchange = function() {
if (activeSelected) {
activeSelected.fill = this.value;
activeSelected.dirty = true;
canvas.renderAll();
}
};
canvas.on('object:selected', function(option) {
activeSelected = option.target;
colorPick.value = activeSelected.fill;
})
canvas.on('selection:cleared', function(option) {
activeSelected = null;
console.log(activeSelected)
});
canvas {
border: black solid 1px;
padding: 5px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<input type='color' id='colorPick'></input>
<canvas id="c" width="200" height="200"></canvas>
I have a simple page with a BorderContainer. The top region is a simple ContentPange, and the center region is a TabContainer. On the top region there is a button that creates a dijit.Menu and binds it to the top region. There is also another button that creates a EnhancedGrid and adds it to the TabContainer. The issue is a follows:
Scenario 1) If you create the menu, and then do a right-click, the menu will show correctly, as long as the grid is not created before the menu is shown for the first time.
Scenario 2) Any other option (create the menu, the grid, and then do the right-click, or create the grid, the menu and then do the right-click) will provoke a blink in the page, (like the page is resizing). A scroll bar will be shown for a second on the right side of the body, and the menu will appear for a second, and then disappear. If you click again, the menu will appear, but opening a sub menu will close will close the main menu, and the options in the sub menu will not work.
I've been able to create a small test case. The behavior is reproducible with any version of dojo previous to 1.8. I've also seen that the menu works just fine if the Border Container has an height diferent than 100% (the width does not affect)
I believe the issue is related to that blink. It seems like the moment the menu is shown the layout is resizing, and in that moment the menu lost the focus and closes itself.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - demo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojo/dojo.js' djConfig="parseOnLoad: true, locale: 'en-us'"></script>
<script>
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dijit.Menu");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojox.layout.ContentPane");
</script>
<style type='text/css'>
#import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojox/grid/enhanced/resources/tundra/EnhancedGrid.css');
#import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/tundra/tundra.css');
</style>
<style type="text/css">
html, body { overflow: auto; width: 100%; height: 100%; margin: 0; }
</style>
<script>
function createMenu(){
var sMenu = new dijit.Menu({});
var pSubMenu = new dijit.Menu();
// Para enviar por mail
pSubMenu.addChild(new dijit.MenuItem({
label: "email 1",
onClick: function(e){
alert(1)
}
}));
pSubMenu.addChild(new dijit.MenuItem({
label: "email 2",
onClick: function(e){
alert(2)
}
}));
// Añadimos el submenu a la entrada de SendTo
sMenu.addChild(new dijit.PopupMenuItem({
label: "SendTo",
popup: pSubMenu
}));
sMenu.addChild(new dijit.MenuItem({
label: "Open"
}))
sMenu.startup();
return sMenu;
}
</script>
</head>
<body class="tundra eco">
<div id="BorderContainerLevel1" dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%; background: none; border:none; padding:10px 0px 0px 0px;">
<div id="pane-test-1" dojoType="dijit.layout.ContentPane" region="top" style="height: 105px; "><!-- z-index:10-->
La cabecera
<button dojoType="dijit.form.Button" type="button" onclick='launch()'>Create grid</button>
<button dojoType="dijit.form.Button" type="button" onclick='launchMenu()'>Create Menu</button>
</div>
<script>
function launch(){
var layout = [[
{
name: ' ',
hidden: true,
field: 'idDocument'},
{
name: ' ',
field: 'contentType',
width: '8%'},
{
name: "Name",
field: 'name',
width: '62%'},
{
name: "Date",
field: 'date',
width: '20%'},
{
name: "Size",
field: 'size',
width: '10%'}
]];
var i = 0;
var gridId = "grid_" + i
var grid = new dojox.grid.EnhancedGrid({
id: gridId,
query: {
idDocument: '*'
},
title:"titulo",
structure: layout
})
bankerTabContainer.addChild(grid)
grid.startup();
var myJson = {"identifier":"idDocument","items":[{"contentType":"pdf","date":"2011-10-26T16:10:45","documentType":"USERDOCUMENT","documentTypeDescription":"User Document","idDocument":534044,"idUser":"OFFMARA","name":"test II Modules.pdf","size":15704}]}
grid.setStore(new dojo.data.ItemFileWriteStore({
data: myJson
}));
}
</script>
<div dojoType="dijit.layout.TabContainer" id="bankerTabContainer" jsId="bankerTabContainer" style="height: 100%;width: 100%; border: 0px; padding: 0px;" region="center"></div>
</div>
<script>
function launchMenu(){
dijit.byId('BorderContainerLevel1').resize();
var menu1 = createMenu();
menu1.bindDomNode(dojo.byId("pane-test-1"));
}
</script>
</body>
</html>