January 2017 - Redino blog

Solution

To fix this issue, we need create index fo ProductSn attribute.

Create a class extending AbstractIndexCreationTask class

    public class ProductsByProductSn:AbstractIndexCreationTask<Product>
    {
        public ProductsByProductSn()
        {
            Map = products => from product in products
                select new
                {
                    ProductSn = product.ProductSn
                };
        }
    }

public class ProductsByProductSn:AbstractIndexCreationTask<Product>

{

public ProductsByProductSn()

{

Map = products => from product in products

select new

{

ProductSn = product.ProductSn

};

}

Then execute this index creation task after DocumentStore initialization.

private EmbeddableDocumentStore _dataStore;

_dataStore = new EmbeddableDocumentStore
{
    DataDirectory = "Data"
};
_dataStore.Initialize();
new ProductsByProductSn().Execute(_dataStore);

private EmbeddableDocumentStore _dataStore;

_dataStore = new EmbeddableDocumentStore

{

DataDirectory = "Data"

};

_dataStore.Initialize();

new ProductsByProductSn().Execute(_dataStore);

In Ext Js 6 Modern (or Sencha Touch), if Ext.grid.plugin.RowExpander plugin is enabled for Ext.grid.Grid, there will be a expander icon (plus icon) at left side of each row. Clicking the expander icon will expand the selected row, and more detail will be displayed. This detail page can be set by itemConfig.body.tpl option.

Like following code

Ext.define('Forestry.app.systemManage.UserManagement', {
			extend: 'Ext.grid.Grid',
			itemConfig: {
				body: {
					tpl: '<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles}<br/></div>'
				}
			},
                        ...
}

Ext.define('Forestry.app.systemManage.UserManagement', {

extend: 'Ext.grid.Grid',

itemConfig: {

body: {

tpl: '<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles}<br/></div>'

}

...

}

And the tpl option is actually XTemplate, so the above code can be written as following form as well:

var itemTpl = new Ext.XTemplate('<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles}<br/></div>');

Ext.define('Forestry.app.systemManage.UserManagement', {
			extend: 'Ext.grid.Grid',
			itemConfig: {
				body: {
					tpl: itemTpl
				}
			},
                        ...
}

var itemTpl = new Ext.XTemplate('<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles}<br/></div>');

Ext.define('Forestry.app.systemManage.UserManagement', {

extend: 'Ext.grid.Grid',

itemConfig: {

body: {

tpl: itemTpl

}

...

}

Note that here XTemplate cannot be replaced by Template class (using Template will display raw literal value as {...})

To use a renderer function for field in the template string, we need add a member function to the template

function generateRoleNameByRoles(roles){
    return roles.join(',');
}
itemTpl.generateRoleNameByRoles = generateRoleNameByRoles;

function generateRoleNameByRoles(roles){

return roles.join(',');

}

itemTpl.generateRoleNameByRoles = generateRoleNameByRoles;

Then the template can be changed like this

var itemTpl = new Ext.XTemplate('<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles:generateRoleNameByRoles}<br/></div>');

1	var itemTpl = new Ext.XTemplate('<div style="color:#aaa;">Real Name:{realName}<br/>Email:{email}<br/>Last Login Time:{lastLoginTime}<br/>Roles:{roles:generateRoleNameByRoles}<br/></div>');

By default in Ext JS 6 Modern version (or Sencha Touch), the TabPanel's TabBar is not scrollable. That means if opened tabs is too many that the TabBar will push the earlier tabs to left side, then they will become invisible anymore (because it's not scrollable)

To make it scrollable, we need set tabBar.scrollable config to true when creating TabPanel

Ext.create('Ext.TabPanel', {
    margins : '2 0 0 0',
    width: '100%',
    deferredRender : false,
    tabBar: {
    	scrollable: true
    },
    activeTab : 0,
    items : [ something ]
});

Ext.create('Ext.TabPanel', {

margins : '2 0 0 0',

width: '100%',

deferredRender : false,

tabBar: {

scrollable: true

activeTab : 0,

items : [ something ]

});

Then we can drag the TabBar to scroll it.

By default the scrollable is 'horizontal' , and of course you can set it to 'vertical' .

Month: January 2017

RavenDB NotSupportedException

Solution

Ext JS 6 Modern Set Field Renderer in itemTpl

Ext JS 6 Modern Set TabBar Scrollable