javascript Archives - Redino blog

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

gbstack03/03/2020 0 Comments

I try to add an Export button in ExtJS, it should do URL encoding for the search parameters and pass the generated query string to the export URL.

{
    xtype: 'button',
    text: 'Export',
    handler: function(){
        var searchParams = {
            pasm: Ext.getCmp('payment_log_pasm').getValue(),
            startDate: Ext.getCmp('payment_log_start_date').getValue(),
            endDate: Ext.getCmp('payment_log_end_date').getValue()
        };
        let qs = Ext.urlEncode(searchParams);
        console.log(qs);
        location.href = appBaseUri + '/sys/payment/export?'+qs;
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

{

xtype: 'button',

text: 'Export',

handler: function(){

var searchParams = {

pasm: Ext.getCmp('payment_log_pasm').getValue(),

startDate: Ext.getCmp('payment_log_start_date').getValue(),

endDate: Ext.getCmp('payment_log_end_date').getValue()

};

let qs = Ext.urlEncode(searchParams);

console.log(qs);

location.href = appBaseUri + '/sys/payment/export?'+qs;

}

When testing above code in Chrome, following error happened:

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

The reason is let keyword is not allowed in non-strict mode for this version of Chrome.

One solution is to change let to var. (But it isn't good)
The better solution is to add "use strict" statement.

So the final code should be

{
    xtype: 'button',
    text: 'Export',
    handler: function(){
        "use strict";
        var searchParams = {
            pasm: Ext.getCmp('payment_log_pasm').getValue(),
            startDate: Ext.getCmp('payment_log_start_date').getValue(),
            endDate: Ext.getCmp('payment_log_end_date').getValue()
        };
        let qs = Ext.urlEncode(searchParams);
        console.log(qs);
        location.href = appBaseUri + '/sys/payment/export?'+qs;
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

{

xtype: 'button',

text: 'Export',

handler: function(){

"use strict";

var searchParams = {

pasm: Ext.getCmp('payment_log_pasm').getValue(),

startDate: Ext.getCmp('payment_log_start_date').getValue(),

endDate: Ext.getCmp('payment_log_end_date').getValue()

};

let qs = Ext.urlEncode(searchParams);

console.log(qs);

location.href = appBaseUri + '/sys/payment/export?'+qs;

}

Ext JS Image Reload

gbstack05/26/2017 0 Comments

In Ext JS, to reload or refresh an image, we can call updateSrc() method, and also setSrc() method is working as well.

var img = Ext.getCmp('img_a');
img.updateSrc('...'); // or img.setSrc('...');

1 2	var img = Ext.getCmp('img_a'); img.updateSrc('...'); // or img.setSrc('...');

And if the requested image is cached, we need use cache buster to avoid loading cached image.

Ext.create('Ext.Img', {
  src: 'http://redino.net/xxx.jpg?' + new Date().getTime()
});

1

2

3

Ext.create('Ext.Img', {

src: 'http://redino.net/xxx.jpg?' + new Date().getTime()

});

Note that I found another post saying to use doComponentLayout method to refresh an image, but this method is deprecated since version 4.1.

Ext JS 6 Modern Set Field Renderer in itemTpl

gbstack01/11/2017 0 Comments

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>'
				}
			},
                        ...
}

1

2

3

4

5

6

7

8

9

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
				}
			},
                        ...
}

1

2

3

4

5

6

7

8

9

10

11

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;

1

2

3

4

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>');

Ext JS 6 Modern Set TabBar Scrollable

gbstack01/04/2017 3 Comments

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 ]
});

1

2

3

4

5

6

7

8

9

10

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' .

Ext JS 6 Duplicate Entity Name Error

gbstack12/30/2016 0 Comments

When I reopened Account Profile tab after closing it, I got following error (shown in browser's console)

Duplicate entity name "AccountProfileModelList": AccountProfileModelList and AccountProfileModelList(…)

In this page, I defined a Model named AccountProfileModelList

Ext.define('AccountProfileModelList', {
    extend : 'Ext.data.Model',
    idProperty : 'id',
    fields : [ {
        name : 'id',
        type : 'int'
    }, 'pasm', 'amount', 'type', 'profit', 'rate_type', 'bill_number', 'transactionNumber',
        'userRealName', 'agentRealName',
        {
            name : 'payDate',
            type : 'date',
            dateFormat : 'Y-m-d H:i:s'
        }]
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Ext.define('AccountProfileModelList', {

extend : 'Ext.data.Model',

idProperty : 'id',

fields : [ {

name : 'id',

type : 'int'

}, 'pasm', 'amount', 'type', 'profit', 'rate_type', 'bill_number', 'transactionNumber',

'userRealName', 'agentRealName',

{

name : 'payDate',

type : 'date',

dateFormat : 'Y-m-d H:i:s'

}]

});

When opening the Account Profile tab first time, the AccountProfileModelList will be defined. And when opening the tab second time, the AccountProfileModelList will be defined again. This is why the error appeared.

What's interesting is that In Ext 5 above scenario won't cause any error, but in Ext 6, a model cannot be defined twice anymore.

To fix this issue, we need use typeof(AccountProfileModelList) == 'undefined' to check whether the model is already defined, if it's defined the model creation code won't be executed.

So the above code should be changed to

if(typeof(AccountProfileModelList) == 'undefined'){
    Ext.define('AccountProfileModelList', {
        extend : 'Ext.data.Model',
        idProperty : 'id',
        fields : [ {
            name : 'id',
            type : 'int'
        }, 'pasm', 'amount', 'type', 'profit', 'rate_type', 'bill_number', 'transactionNumber',
            'userRealName', 'agentRealName',
            {
                name : 'payDate',
                type : 'date',
                dateFormat : 'Y-m-d H:i:s'
            }]
    });
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

if(typeof(AccountProfileModelList) == 'undefined'){

Ext.define('AccountProfileModelList', {

extend : 'Ext.data.Model',

idProperty : 'id',

fields : [ {

name : 'id',

type : 'int'

}, 'pasm', 'amount', 'type', 'profit', 'rate_type', 'bill_number', 'transactionNumber',

'userRealName', 'agentRealName',

{

name : 'payDate',

type : 'date',

dateFormat : 'Y-m-d H:i:s'

}]

});

}

A more Ext way to detect whether a Ext class is already defined is using Ext.ClassManager.isCreated(className)

Above code can also be changed to

if(!Ext.ClassManager.isCreated(AccountProfileModelList)){
    Ext.define('AccountProfileModelList', {
        extend : 'Ext.data.Model',
        ...
    });
}

1

2

3

4

5

6

if(!Ext.ClassManager.isCreated(AccountProfileModelList)){

Ext.define('AccountProfileModelList', {

extend : 'Ext.data.Model',

...

});

}

Ext JS 6 Invalid Component Id

gbstack12/29/2016 0 Comments

In Ext 6, I got following error

ExtJs invalid component id "profile.ModifyUserBasicInfo"

Following is code producing the error

globalObject.openWindow = function(winTitle, win, winWidth, config) {
   return Ext.create('Ext.window.Window', {
      autoShow : true,
      modal : true,
      title : winTitle,
      id : win,
      resizable : false,
      width : winWidth || 300,
      items : typeof (win) == 'string' ? Ext.create('Forestry.app.' + win, config) : win
   });
}

1

2

3

4

5

6

7

8

9

10

11

globalObject.openWindow = function(winTitle, win, winWidth, config) {

return Ext.create('Ext.window.Window', {

autoShow : true,

modal : true,

title : winTitle,

id : win,

resizable : false,

width : winWidth || 300,

items : typeof (win) == 'string' ? Ext.create('Forestry.app.' + win, config) : win

});

}

var window = ProfitShare.openWindow('Modify User Basic Information', 'profile.ModifyUserBasicInfo', 300);

1	var window = ProfitShare.openWindow('Modify User Basic Information', 'profile.ModifyUserBasicInfo', 300);

This error doesn't appear in Ext 5, after upgrading to Ext 6, it appears now.

It is caused by the id property cannot contain "." symbol, but the id property we used here is profile.ModifyUserBasicInfo

To fix this issue, we can replace all "." to "-".

globalObject.openWindow = function(winTitle, win, winWidth, config) {
   return Ext.create('Ext.window.Window', {
      autoShow : true,
      modal : true,
      title : winTitle,
      id : win.replace(/\./g, '-'),
      resizable : false,
      width : winWidth || 300,
      items : typeof (win) == 'string' ? Ext.create('Forestry.app.' + win, config) : win
   });
}

1

2

3

4

5

6

7

8

9

10

11

globalObject.openWindow = function(winTitle, win, winWidth, config) {

return Ext.create('Ext.window.Window', {

autoShow : true,

modal : true,

title : winTitle,

id : win.replace(/\./g, '-'),

resizable : false,

width : winWidth || 300,

items : typeof (win) == 'string' ? Ext.create('Forestry.app.' + win, config) : win

});

}

Following link from describes the id property naming rule

http://docs.sencha.com/extjs/6.2.1/classic/Ext.window.Window.html#cfg-id

The original quote

Note: Valid identifiers start with a letter or underscore and are followed by (optional) additional letters, underscores, digits or hyphens.

Ext JS form load custom object

gbstack11/09/2016 0 Comments

I have a custom object currentUser, it contains bank account name, mobile number, and I want fill the form with currentUser's properties.

            var currentUser = {
                "userName": "13853800001",
                "mobileNumber": "13853800001",
                "bankAccountName": null,
                "bankCardNo": null,
                "bankBranchName": null,
                "roles": [{"name": "agent", "level": 3}],
                "unionBankNo": null
            };

1

2

3

4

5

6

7

8

9

var currentUser = {

"userName": "13853800001",

"mobileNumber": "13853800001",

"bankAccountName": null,

"bankCardNo": null,

"bankBranchName": null,

"roles": [{"name": "agent", "level": 3}],

"unionBankNo": null

};

To load a custom object, first define a Model, then instantiate the Model with custom object, next call loadRecord with the model object. Note that I tried Ext.form.Panel loadRecord(), it's not working for me, Ext.form.Basic should be used here. So we need call getForm() to get Ext.form.Basic

Ext.define('UserInfoModel', {
   extend: 'Ext.data.Model',
   fields: ['bankCardNo', 'bankBranchName', 'unionBankNo']
});
var form = Ext.getCmp('editUserForm').getForm();
form.loadRecord(new UserInfoModel(currentUser));

1

2

3

4

5

6

Ext.define('UserInfoModel', {

extend: 'Ext.data.Model',

fields: ['bankCardNo', 'bankBranchName', 'unionBankNo']

});

var form = Ext.getCmp('editUserForm').getForm();

form.loadRecord(new UserInfoModel(currentUser));

Another example

Ext.define('Thing', {
    extend:'Ext.data.Model',
    fields:[
        'name'
    ]
});

Ext.application({
    launch: function() {
        var form = Ext.create('Form1');
        
        Ext.util.Observable.capture(form, function() {
            console.log('form', this, arguments);
        });
        
        form.loadRecord(new Thing({name:'neil'}));
        
    }
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Ext.define('Thing', {

extend:'Ext.data.Model',

fields:[

'name'

]

});

Ext.application({

launch: function() {

var form = Ext.create('Form1');

Ext.util.Observable.capture(form, function() {

console.log('form', this, arguments);

});

form.loadRecord(new Thing({name:'neil'}));

}

});

http://jsfiddle.net/el_chief/HBah5/4/

Fabric.js set text color

gbstack09/02/2014 3 Comments

Fabric.js is a powerful javascript canvas library which wraps html5 canvas operation, and introduces objects (text, shape, path, etc.) to developer.

There is a common method set() for object, it can be used to set property of an object. But if you want to change text color, text.set('color', '#0f0') will not work.

To set color of text, we need modify the fill attribute or use setColor() method (only available for text object)

text.set({fill: '#000'})

1	text.set({fill: '#000'})

Or

text.setColor('...')

1	text.setColor('...')

Date format in javascript

gbstack03/20/2014 0 Comments

Formatting date is a common task, like converting timestamp to "yyyy-MM-dd hh:mm:ss" format (e.g. 2013-03-03 12:00:00)

Date.format function can do this job

var d = new Date();

console.log(d.format('yyyy-MM-dd hh:mm:ss'));

1

2

3

var d = new Date();

console.log(d.format('yyyy-MM-dd hh:mm:ss'));

But it only works in Chrome, but not work in IE and Firefox.

Here we can use Moment.js library to format the date (Moment.js is a cross-browser date library)

console.log(moment().format('YYYY-MM-DD HH:mm:ss'))

1	console.log(moment().format('YYYY-MM-DD HH:mm:ss'))