{"id":33702,"date":"2023-02-12T16:29:59","date_gmt":"2023-02-12T10:59:59","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/"},"modified":"2023-02-12T16:29:59","modified_gmt":"2023-02-12T10:59:59","slug":"solved-ext-container-display-card-of-employee-birthday-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/","title":{"rendered":"[Solved] Ext.Container Display Card of Employee Birthday [closed]"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-52647445\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"52647445\" data-parentid=\"52562282\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Here&#8217;s the: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fiddle.sencha.com\/#view\/editor&amp;fiddle\/2m74\"><strong>FIDDLE<\/strong><\/a><br \/>\nTheme on the site(you gave as an example) is <code>Triton<\/code> and it loads fonts itself.<br \/>\nI used <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.sencha.com\/extjs\/6.2.0\/classic\/Ext.view.View.html\">Ext.view.View<\/a>. You must pass <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.sencha.com\/extjs\/6.2.0\/classic\/Ext.XTemplate.html\">Ext.XTemplate<\/a> and store with data. So you can populate cards.<br \/>\nFor styles open <code>index.html<\/code>.<br \/>\nBackground color of the iframe(there where view is shown), when you switch to <code>Triton<\/code>, changes to the same color as it was given in your example(<code>#f5f5f5<\/code>) and because of this there difference may can&#8217;t be seen, so here&#8217;s the preview:<br \/><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png\"><img decoding=\"async\" src=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png\" alt=\"enter image description here\"><\/a><\/p>\n<p><strong>EDIT:<\/strong><br \/>\nI made another fiddle where you can populate cards, added some <code>XTemplate<\/code> functions to differ colors and text according to event type:<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/fiddle.sencha.com\/#view\/editor&amp;fiddle\/2m9t\"><strong>FIDDLE<\/strong><\/a><\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Ext.Container Display Card of Employee Birthday [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Here&#8217;s the: FIDDLE Theme on the site(you gave as an example) is Triton and it loads fonts itself. I used Ext.view.View. You must pass Ext.XTemplate and store with data. So you can populate cards. For styles open index.html. Background color of the iframe(there where view is shown), when you switch to Triton, changes to &#8230; <a title=\"[Solved] Ext.Container Display Card of Employee Birthday [closed]\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/\" aria-label=\"More on [Solved] Ext.Container Display Card of Employee Birthday [closed]\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[2105,333],"class_list":["post-33702","post","type-post","status-publish","format-standard","hentry","category-solved","tag-extjs","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] Ext.Container Display Card of Employee Birthday [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Ext.Container Display Card of Employee Birthday [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Here&#8217;s the: FIDDLE Theme on the site(you gave as an example) is Triton and it loads fonts itself. I used Ext.view.View. You must pass Ext.XTemplate and store with data. So you can populate cards. For styles open index.html. Background color of the iframe(there where view is shown), when you switch to Triton, changes to ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-12T10:59:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Ext.Container Display Card of Employee Birthday [closed]\",\"datePublished\":\"2023-02-12T10:59:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/\"},\"wordCount\":126,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png\",\"keywords\":[\"extjs\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/\",\"name\":\"[Solved] Ext.Container Display Card of Employee Birthday [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png\",\"datePublished\":\"2023-02-12T10:59:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/#primaryimage\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/uploads\\\/2023\\\/02\\\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-ext-container-display-card-of-employee-birthday-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Ext.Container Display Card of Employee Birthday [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Ext.Container Display Card of Employee Birthday [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Ext.Container Display Card of Employee Birthday [closed] - JassWeb","og_description":"[ad_1] Here&#8217;s the: FIDDLE Theme on the site(you gave as an example) is Triton and it loads fonts itself. I used Ext.view.View. You must pass Ext.XTemplate and store with data. So you can populate cards. For styles open index.html. Background color of the iframe(there where view is shown), when you switch to Triton, changes to ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/","og_site_name":"JassWeb","article_published_time":"2023-02-12T10:59:59+00:00","og_image":[{"url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png","type":"","width":"","height":""}],"author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Ext.Container Display Card of Employee Birthday [closed]","datePublished":"2023-02-12T10:59:59+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/"},"wordCount":126,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png","keywords":["extjs","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/","name":"[Solved] Ext.Container Display Card of Employee Birthday [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/#primaryimage"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png","datePublished":"2023-02-12T10:59:59+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/#primaryimage","url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2023\/02\/Solved-ExtContainer-Display-Card-of-Employee-Birthday-closed.png"},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-ext-container-display-card-of-employee-birthday-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Ext.Container Display Card of Employee Birthday [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/33702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=33702"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/33702\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=33702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=33702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=33702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}