JSFiddle - React, Tailwind, and code Playground
JavaScript
/*******************************/
//My Controller
/******************************/
Ext.define('MyApp.controller.NotificationController',{
extend: 'Ext.app.Controller',
stores: ['NotificationStore'],
views: ['MyApp.view.NotificationView'],
//views: 'NotificationView',
init: function(){
this.control({
'#notificationViewInner': {
render: function(){
var weekNotifications = Ext.getCmp('notificationViewInner').query('>container>container')[1];
weekNotifications.update("hello");
}
}
})
}
});
/*******************************/
//My View
/******************************/
Ext.define("MyApp.view.NotificationView", {
extend: 'Ext.panel.Panel',
renderTo: Ext.getBody(),
alias: 'widget.notifications',
id: 'notificationViewInner',
layout: {type: 'vbox',align: 'stretch'},
//html: 'Notifications Here!'
items:[{
//Week
xtype: 'container',
flex: 1,
margins: '5 5 5 5',
layout: {type: 'vbox', align: 'stretch'},
items: [{
//Heading
xtype: 'container',
height: 20,
//flex: 1,
html: 'This week'
},
{
/****************************************************/
//I am trying to get into this block
/****************************************************/
//Show Notifications
xtype: 'container',
height: 20,
//flex: 1,
html: 'Notifications here'
},
{
//Content
xtype: 'container',
cls: 'weekContentNotification',
//height: 40,
flex: 1,
margin: '0 0 0 35',
layout: {type: 'vbox', align: 'stretch'},
}]
},
{
xtype: 'container',
flex: 1,
margins: '5 5 5 5',
layout: {type: 'vbox',align:'stretch'},
items: [{
xtype: 'container',
height: 20,
html: 'This month'
},
{
xtype: 'container',
height: 20,
...