View results.RowDetails.js
Ext.define('', {
extend: 'Ext.container.Container',
xtype: 'search.results.rowdetails',
requires: [
View plugin.RowWidget.js
Ext.define('', {
extend: 'Ext.grid.plugin.RowWidget',
alias: '',
bindView: function(view) {
this.viewListeners = view.on({
scope: this,
destroyable: true,

In a previous post ( Stan explained the foundation of Sencha Config System and how the getters and setters work. In this post I'm going to explain the new Ext.Config.configs which have been added in versions 5.0 and 5.5, which you can find here

  1. Ext.Config.cached

According to Sencha docs the cached config when set as true the config property will be stored on the class prototype once the first instance has had a chance to process the default value. To test that I've created a Fiddle:


Sencha ViewModels tips and considerations.

  1. Always destroy your bindings in the destroy method of your view. In the example below, the grid is a child of a parent view which has a ViewModel. But if the child is removed from the parent the binding will still be called and can lead to unexpected surprises. So you could destroy them manually, or automatically by adding a ViewModel to the view

    Ext.define('MyApp.view.MyGridTab', {
        extend: 'Ext.grid.Panel',
        xtype: 'mygrid',
        columns: [],
        beforeRender: function () {
View customDisplayField.js
// Custom display field: D01H7/74; D01H9/04
xtype: 'displayfield',
fieldLabel: 'Custom display field',
bind: {
value: '{fooArray}'
customFieldTpl: new Ext.XTemplate(
'<tpl for="." between=";&nbsp;">',
'<span class="search-field-link" data-value="{xindex}"' ,
View AngularExt6.js
Ext.define('MyApp.modules.Angular', {
singleton: true,
dependeciesLoaded: false,
showComponent: function() {
var count = 5;
if (!this.dependeciesLoaded) {
var onLoad = function () {
View kbSelect.js
/* Usage:
* <div kb-select ng-model="items.selectedItem">
* <div class="just-a-tag-with-a-class"></div>
* <my-data-row ng-repeat="item in items" entity="item"></my-data-row>
* </div>
function kbSelect() {
return {
restrict: 'EA',