I'm new to ExtJS, and I'm trying to create a nested, scrollable panel within a window. Unfortunately, none of the answers I've researched so far have provided a solution to this particular problem (or I'm just not understanding them).
Extjs scrollable panel
Autoscroll on parent panel, when there is overflow on child panels.Extjs
Extjs 4.1 What layout for 3 components scrollable
Here is a set of examples that contains a scrollable panel ('Framed Panel: Width 280/Height 180'):
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/panel/panel.html
Evidently, this technique doesn't work when nesting panels inside a window, as per my sample code below (using version 4.2.1.883):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Nested Scrollable Panel Demo</title>
<script type="text/javascript" src="ext/ext-all-dev.js"></script>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
var btnTest = Ext.create("Ext.Button",{
text : "Scrollable Nested Panel Test",
renderTo: Ext.getBody()
});
btnTest.on('click', function(){
var html_text = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, '+
'porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, '+
'lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis '+
'vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>'+
'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing '+
'eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt '+
'diam nec urna. Curabitur velit. Lorem ipsum dolor sit amet.</p>';
var win = Ext.create("Ext.window.Window",{
title : "Main Window",
width : 300,
height : 200,
maximizable : true,
defaults: {
xtype : "panel",
height : 60,
collapsible : true,
autoscroll : true
},
items : [{
title : "Menu",
html : 'menu panel content'
},{
html: html_text,
frame : true,
width : '100%',
height : 300
}]
});
win.show();
});
});
</script>
</head>
<body>
<h1>Nested Scrollable Panel Demo</h1>
</body>
</html>
How can I get this to work, where the content of the second panel will scroll, like the panel entitled 'Framed Panel: Width 280/Height 180' in the linked example above?
If you add autoScroll: true to the window configuration the content of the window will be scrollable. (Example below)
However, like Evan is pointing out, if you want the content of the second panel to be scrollable you don't set a height on the panel and add the autoScroll: true property to the second panel, add a flex and vbox layout to the window. (second example)
First Example
Live Example
Ext.onReady(function(){
var btnTest = Ext.create("Ext.Button",{
text : "Scrollable Nested Panel Test",
renderTo: Ext.getBody()
});
btnTest.on('click', function(){
var html_text = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, '+
'porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, '+
'lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis '+
'vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>'+
'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing '+
'eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt '+
'diam nec urna. Curabitur velit. Lorem ipsum dolor sit amet.</p>';
var win = Ext.create("Ext.window.Window",{
title : "Main Window",
width : 300,
height : 200,
maximizable : true,
autoScroll: true,
defaults: {
xtype : "panel",
height : 60,
collapsible : true,
autoscroll : true
},
items : [{
title : "Menu",
html : 'menu panel content'
},{
html: html_text,
frame : true,
width : '100%',
height : 300
}]
});
win.show();
});
});
Second Example
Live Example
var win = Ext.create("Ext.window.Window",{
title : "Main Window",
width : 300,
height : 200,
maximizable : true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype : "panel",
collapsible : true,
autoscroll : true
},
items : [{
title : "Menu",
html : 'menu panel content'
},{
html: html_text,
frame : true,
flex: 1,
autoScroll: true
}]
});
Related
I am trying to store some of my data in a const variable. Like I am getting FAQ section data from an API call. Like this one, I have my data in restaurant.faq and there can be multiple data so I map through it and it is working perfectly. Suppose Now I have two questions and two answers and I am getting it perfectly.
{restaurant.faq?.map((f) => (
<ListGroup.Item key={f.id}>
Question - <strong>{f.question}</strong>
<br />
Answer - <strong>{f.answer}</strong>
</ListGroup.Item>
))}
But I want to pass the same question and answer from this restaurant.faq in a const variable
Like this in rows [{question, answer}] section. How Can I do this?
const data = {
title: "FAQ",
rows: [
{
question: "Lorem ipsum dolor sit amet,",
answer: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,
ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.
In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.
Fusce sed commodo purus, at tempus turpis.`,
},
{
question: "Nunc maximus, magna at ultricies elementum",
answer:
"Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.",
},
],
};
Update how to do the same with this one?
{restaurant.menu?.map((men) => (
<ListGroup.Item key={men.id}>
<Image src={men.image} alt={men.name} style={{height:'250px', width:'1800px'}} fluid />
</ListGroup.Item>
))}
const images = [
{
original: 'https://picsum.photos/id/1018/1000/600/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
},
];
You can do like this
const data = {
title: "FAQ",
rows: restaurant.faq?.map(({ question, answer}) => (
{ question,
answer
})
)
I have a react component , and I want to fill its state by fetching data from the url that I tested in browser and returns json data . but in my code I got nothing, here is my code :
fetch(`https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json`)
.then(response => response.json())
//.then(data => JSON.stringify(data))
.then(data => this.setState({
latitude: position.coords.latitude, // this ois ok
longitude: position.coords.longitude, /// this is ok
locations : data // here I get {}
}));
Problem is here in my render function
const { location } = this.state.locations;
alert("1" +JSON.stringify( this.state.locations));
alert("2" + JSON.stringify( location));
First alert is full with correct data but second alert returns undefined.
It looks like you're trying to destructure location from this reponse:
{
"posts": [
{
"_id": "5b3f761e21d434001487ad99",
"title": "Hello Word!",
"content": "The world is green!",
"__v": 0
},
{
"_id": "5b3f76b521d434001487ad9a",
"title": "Sed porttitor lectus nibh",
"content": "Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.",
"__v": 0
}
]
}
As you can see, it doesn't have a location property so the result of your destructure will be undefined. Are you hitting the right endpoint?
Below is my nested object json, where i want access the properties in different react component
{
"Created":"2017-02-09",
"SenderOrReceiver":"Not developed yet",
"PageResponsible":"Yogesh Shinde",
"LastUpdated":"2017-02-09",
"ExternalLinks":[
{
"Id":null,
"Title":"Yahoo",
"Url":"http://yahoo.com"
},
{
"Id":null,
"Title":"Facebook",
"Url":"http://facebook.com"
}
],
"InternalLinks":[
{
"Id":null,
"Title":"Google",
"Url":"~/link/23199285feef4501987b5fa452e49b94.aspx"
}
],
"Appendices":[
{
"Id":null,
"Title":"React",
"Url":"~/link/23199285feef4501987b5fa452e49b94.aspx"
}
],
"ContactDetails":{
"Email":"user#gmail.com",
"Information":"Aliquam mollis, quam nec suscipit placerat, nibh est efficitur urna, in ornare mauris eros eu tortor. Nulla fermentum hendrerit mi, nec luctus nunc auctor at. Nullam sagittis posuere libero, eget imperdiet neque. Etiam ac lacus diam. Mauris sapien turpis, lobortis non eros in, porttitor dapibus ipsum.",
"Name":"user1",
"Telephone":"11234"
},
"Subject":[
"Lorem"
],
"HeadingLinks":[
{
"Id":"headinglink1",
"Title":"Heading1",
"Url":"/sv/news-page/#headinglink1"
}
]
}
Below is my server side index.cshtml (Layout)
#model intrav2.infrastructure.ViewModels.Pages.NewsPageViewModel
<div class="l-content_primary" role="main">
<div id="breadcrumb"></div>
<h2>#Html.PropertyFor(x => x.CurrentPage.Heading)</h2>
<div id="newcreatedinfo"></div>
<div>#Html.PropertyFor(x => x.CurrentPage.Media)</div>
<p class="preamble">#Html.PropertyFor(x => x.CurrentPage.Preamble)</p>
<div id="newsHeadingLinks"></div>
<p>#Html.PropertyFor(x => x.CurrentPage.MainBody)</p>
#Html.PropertyFor(x => x.CurrentPage.ExtraInformation)
<div id="newspagecontent"></div>
</div>
<aside class="l-blocks_secondary" role="complementary" id="newsSiderBar"></aside>
Now i want,
Created/SenderOrReceiver property in newcreatedinfo
External and Internal links in newspagecontent
Appendices/Contact in side content on page
I am adding a readmore directive to an angular app. The read-more works great, but try to use a filter for text and it does not interpret the filter string correctly.
Example: http://plnkr.co/edit/Tsqkv1nd6CC8e5Kr9pdU?p=preview
Change demo text to the code below to see what is happening:
<p read-more>(1) This is a short paragraph.</p>
<p read-more>(2) This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph.</p>
<p>(3) {{desc}}</p>
<p read-more>(4) {{desc}}</p>
Notice the 3rd and 4th examples use the $scope.desc value defined in the controller in app.js. #3 works. #4 fails. Why? How to fix?
app.js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.desc = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vehicula tortor, vitae ornare nunc semper eu. Vivamus varius, eros vel tristique accumsan, libero nulla cursus ante, eu eleifend risus orci scelerisque nibh. Curabitur feugiat, augue ut commodo bibendum, nisi leo porttitor diam, tincidunt auctor tellus ante sit amet nibh. Duis velit libero, aliquam at felis eu, pellentesque mollis mi. Nam a est orci. Ut bibendum sagittis semper. Cras eget arcu non augue mollis aliquam. Ut ut gravida ligula. Nulla imperdiet lacinia mi, nec fringilla mauris interdum at. Phasellus gravida tempor varius. Cras molestie et nulla eget maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet malesuada feugiat. Curabitur fermentum bibendum nulla, non dictum ipsum tincidunt non. Quisque convallis pharetra tempor. Donec id pretium leo. Pellentesque luctus massa non elit viverra pellentesque. Cras vitae neque molestie, rhoncus ipsum sit amet, lobortis dui. Fusce in urna sem. Vivamus vehicula dignissim augue et scelerisque. Etiam quam nisi, molestie ac dolor in, tincidunt tincidunt arcu. Praesent sed justo finibus, fringilla velit quis, porta erat. Donec blandit metus ut arcu iaculis iaculis. Cras nec dolor fringilla justo ullamcorper auctor. Aliquam eget pretium velit. Morbi urna justo, pulvinar id lobortis in, aliquet placerat orci.';
});
app.directive('readMore', function() {
return {
restrict: 'A',
transclude: true,
replace: true,
template: '<p></p>',
scope: {
moreText: '#',
lessText: '#',
words: '#',
ellipsis: '#',
char: '#',
limit: '#',
content: '#'
},
link: function(scope, elem, attr, ctrl, transclude) {
var moreText = angular.isUndefined(scope.moreText) ? ' <a class="read-more">Read More...</a>' : ' <a class="read-more">' + scope.moreText + '</a>',
lessText = angular.isUndefined(scope.lessText) ? ' <a class="read-less">Less ^</a>' : ' <a class="read-less">' + scope.lessText + '</a>',
ellipsis = angular.isUndefined(scope.ellipsis) ? '' : scope.ellipsis,
limit = angular.isUndefined(scope.limit) ? 150 : scope.limit;
attr.$observe('content', function(str) {
readmore(str);
});
transclude(scope.$parent, function(clone, scope) {
readmore(clone.text().trim());
});
function readmore(text) {
var text = text,
orig = text,
regex = /\s+/gi,
charCount = text.length,
wordCount = text.trim().replace(regex, ' ').split(' ').length,
countBy = 'char',
count = charCount,
foundWords = [],
markup = text,
more = '';
if (!angular.isUndefined(attr.words)) {
countBy = 'words';
count = wordCount;
}
if (countBy === 'words') { // Count words
foundWords = text.split(/\s+/);
if (foundWords.length > limit) {
text = foundWords.slice(0, limit).join(' ') + ellipsis;
more = foundWords.slice(limit, count).join(' ');
markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
}
} else { // Count characters
if (count > limit) {
text = orig.slice(0, limit) + ellipsis;
more = orig.slice(limit, count);
markup = text + moreText + '<span class="more-text">' + more + lessText + '</span>';
}
}
elem.append(markup);
elem.find('.read-more').on('click', function() {
$(this).hide();
elem.find('.more-text').addClass('show').slideDown();
});
elem.find('.read-less').on('click', function() {
elem.find('.read-more').show();
elem.find('.more-text').hide().removeClass('show');
});
}
}
};
});
style.css:
/* Put your css in here */
a.read-more, a.read-less {
cursor: pointer;
color: blue;
font-size: 0.8em;
}
span.more-text {
display: none;
}
span.more-text.show {
display: inline !important
}
index.html:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular Read More Directive</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p read-more>This is a short paragraph.</p>
<p read-more>This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph. This is a long paragraph.</p>
<p read-more>{{desc}}</p>
</body>
</html>
As per your current code implementation readmore is getting called before the transcluded DOM content gets projected on directive template.
In this case you should take use content attribute just by saying content="{{desc}}", which will allow to call readmore method of directive as attr.$observe method will get fired.
<p read-more content="{{desc}}">(4)</p>
Demo Plunkr
How to make a responsive image banner that has image and text layers with absolute positions? My client wants the banner along with the layered text and images to scale down when the screen goes smaller (Please refer to the screenshot below). I am not looking for a slider, this is just a simple banner with layers. My client has different banners(with layers) on every page, their website used to be non-responsive and now they want to make it responsive. CSS Media queries will probably not work here since I have to define a new font size and image width for every pixel change on the screen which I believe is time consuming.
As you can see, the banner along with the layered texts and images scales down as the screen goes smaller
Link to my fiddle: https://jsfiddle.net/ophLk9pz/1/
HTML:
<div class = "banner">
<img src = "http://i.imgur.com/yfGOPkH.jpg" />
<img src = "http://www.dummymag.com//media/img/dummy-logo.png" class = "layer-image">
<h1>Sample Banner Text</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>
CSS:
.banner { width: 1440px; position: relative; }
.banner img { z-index: -1; }
.banner h1 {position: absolute; bottom: 30px; left: 10px; }
.banner p {position: absolute; top: 150px; left: 10px; }
.banner .layer-image { position: absolute; top: 0; left: 150px; z-index: 2; }
Any help or ideas would be greatly appreciated, thanks in advance!
You can try to use viewport percentage units on the texts:
https://drafts.csswg.org/css-values/#viewport-relative-lengths
h1 { font-size: 8vw }
And images can be scaled like so:
img {
height: auto;
width:100%;
}
If you need fancier scaling methods (contain, cover etc) i believe you need to have the image as a background-image