PDA

View Full Version : Why not refresh after calling Ext.create?



tiplip
24 Jan 2014, 4:20 AM
hi all,

With ExtJS4.2.1, I have two classes extended from customized container, one Login window and one Main window. After input username and password then click sing in button, Login window will hide and Main window will show.

Unexpectely, however, Main window shows with Login window children, you can try with https://fiddle.sencha.com/#fiddle/2ub

Ext.define('Tulip.BaseWindow', {
extend: 'Ext.container.Container',
alias: 'BaseWindow',

width: 400,
height: 300,
floating: true,
constrain: true,
resizable: true,
style: {
fontFamily: 'Segoe UI'
},


items: [], // http://www.sencha.com/forum/showthread.php?175588

config: {
icon: '',
title: 'Tulip Base Window',
},

minable: false,
maxable: false,
closable: true,

ox: 0, // old x
oy: 0, // old y
ow: 400, // old width
oh: 300, // old height

background: '/img/chat/winBg/default.png',
header: undefined,

body: undefined,
bodyItems: [],
bodyCls: '',
bodyLayout: 'absolute',

defCloseAction: function(e) {
var id = e.getTarget().id;
id = id.substring(0, id.indexOf('_close_bt'));
Ext.getCmp(id).destroy();
},

defMinAction: function(e) {
var id = e.getTarget().id;
id = id.substring(0, id.indexOf('_min_bt'));
Ext.getCmp(id).hide();
},

initComponent: function() {
var me = this;

if (Ext.isEmpty(me.cls)) {
me.html = '<img src="' + me.background + '" style="width:100%;height:100%"/>';
}

var titleHtml = '';
if (Ext.isEmpty(me.icon)) {
title = me.title;
} else {
titleHtml = '<span style="width:21px;height:21px;display:block;float:left;background:url('
+ me.icon + ') no-repeat;"></span><span style="width:'
+ (me.width - 95 - 30) + 'px;height:21px;margin-left:5px;line-height:21px;display:block;float:left">'
+ me.title + '</span>';
}

if (Ext.isEmpty(me.layout)) me.layout = 'absolute';

me.header = Ext.create('Ext.container.Container', {
id: me.id + '_header',
x: 0, y: 0,
width: me.width,
height: 25,
items: [{
xtype: 'label',
id: me.id + '_header_title',
html: titleHtml,
x: 5, y: 3,
width: me.width - 95
}],
layout: 'absolute'
});

me.body = Ext.create('Ext.container.Container', {
id: me.id + '_body',
x: 0, y: me.header.height,
width: me.width,
height: me.height - me.header.height,
items: me.bodyItems,
cls: me.bodyCls,
layout: me.bodyLayout
});

if (me.closeAction == null || typeof(me.closeAction) != 'function') {
me.closeAction = me.defCloseAction;
}

if (me.minAction == null || typeof(me.minAction) != 'function') {
me.minAction = me.defMinAction;
}

var tx = 0;
if (me.closable) {
me.header.add(me.createToolLabel(me.id + '_close_bt', 360, 39, 'close',
function(e) {document.getElementById(this.id).style.background = 'url(/img/chat/tool/btn_close_highlight.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(/img/chat/tool/btn_close_normal.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(/img/chat/tool/btn_close_down.png)';},
me.closeAction));
tx += 28;
}
if (me.minable) {
me.header.add(me.createToolLabel(me.id + '_min_bt', 360 - tx, 28, 'min',
function(e) {document.getElementById(this.id).style.background = 'url(img/chat/tool/btn_mini_highlight.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(img/chat/tool/btn_mini_normal.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(img/chat/tool/btn_mini_down.png)';},
me.minAction));
tx += 28;
}

me.items.push(me.header, me.body);

me.draggable = {
delegate: me.id + '_header'
}

me.addListener('resize', me.resize);

me.callParent(arguments);
},

updateTitle: function(icon, title) {
if(!Ext.isEmpty(icon)) {
title = '<span style="width:21px;height:21px;display:block;float:left;background:url(' + icon + ') no-repeat;"></span><span style="width:'
+ (me.width - 95 - 30) + 'px;height:21px;margin-left:5px;line-height:21px;display:block;float:left">'
+ title + '</span>';
}
Ext.getCmp(this.id + '_header_title').update(title);
},

getBody: function(){
return this.body;
},

resize: function(cmp, width, height, opts) {
this.header.setSize(width, 25);

if (Ext.getCmp(cmp.id + '_min_bt') != null) {
Ext.getCmp(cmp.id + '_min_bt').setPosition(width - (this.ow - Ext.getCmp(cmp.id + '_min_bt').x), 0);
}
if (Ext.getCmp(cmp.id + '_max_bt') != null) {
Ext.getCmp(cmp.id + '_max_bt').setPosition(width - (this.ow - Ext.getCmp(cmp.id + '_max_bt').x), 0);
}
if (Ext.getCmp(cmp.id + '_close_bt') != null) {
Ext.getCmp(cmp.id + '_close_bt').setPosition(width - (this.ow - Ext.getCmp(cmp.id + '_close_bt').x), 0);
}

this.ow = width;
this.oh = height;

if (Ext.isEmpty(this.cls)) {
this.body.setPosition(3, 25);
this.body.setSize(width - 6, height - 30);
} else {
this.body.setPosition(6, 25);
this.body.setSize(width - 14, height - 30);
}
},

createToolLabel: function(id, x, width, sig, overHand, outHand, downHand, clickHand) {
var icon = '';
if (sig == 'min') icon = 'mini';
if (sig == 'max') icon = 'max';
if (sig == 'close') icon = 'close';
return Ext.create('Ext.form.Label', {
id: id,
x: x, y: 0,
width: width, height: 20,
style: {
background: 'url(/img/chat/tool/btn_' + icon + '_normal.png)'
},
listeners: {
mouseover: {
element: 'el',
fn: overHand
},
mouseout: {
element: 'el',
fn: outHand
},
mousedown: {
element: 'el',
fn: downHand
},
click: {
element: 'el',
fn: clickHand
}
}
});
}
});

Ext.define('Tulip.Lync.LoginWindow', {
extend: 'Tulip.BaseWindow',
alias: 'LoginWindow',
resizable: false,
id: 'loginWindow',

icon: '/img/chat/tool/connect.png',
title: 'Sign in',
offsetTop: 60,
offsetLeft: 30,


login: function() {
var me = this,
user = me.username.getValue(),
passwd = me.password.getValue();

if (user == null || user.length == 0) {
me.noticeLabel.setText('<font color="red">Please input username</font>', false);
return
}
if (passwd == null || passwd.length == 0) {
me.noticeLabel.setText('<font color="red">Please input password</font>', false);
return
}

me.hide();
Ext.create('MainWindow').show();

},

initComponent: function() {
var me = this;

me.username = Ext.create('Ext.form.field.Text', {
name: 'uid',
inputType: 'text',
x: me.offsetLeft + 70,
y: me.offsetTop,
width: 180,
height: 27,
emptyText: 'Username',
selectOnFocus: true, enableKeyEvents: true,
initEvents: function() {
var keyPress = function(e){
if (e.getKey() == e.ENTER) {
me.login()
}
};
this.el.on("keypress", keyPress, this);
}
});
me.password = Ext.create('Ext.form.field.Text', {
name: 'password',
inputType: 'password',
x: me.offsetLeft + 70,
y: me.offsetTop + 35,
width: 180,
height: 27,
emptyText: 'Password',
selectOnFocus: true, enableKeyEvents: true,
initEvents: function() {
var keyPress = function(e){
if (e.getKey() == e.ENTER) {
me.login()
}
};
this.el.on("keypress", keyPress, this);
}
});
me.noticeLabel = Ext.create('Ext.form.Label', {
x: me.offsetLeft,
y: me.offsetTop + 95
});

me.bodyItems = [{
xtype: 'label',
html: '<div style="font-size:14px;">Username</div>',
x: me.offsetLeft,
y: me.offsetTop + 3
}, me.username, {
xtype: 'label',
html: '<div style="font-size:14px;">Password</div>',
x: me.offsetLeft,
y: me.offsetTop + 38
}, me.password, {
xtype: 'label',
html: '<div style="font-size:13px;"><span style="color:#0486DE;cursor:pointer" title="Register">Register</span></div>',
x: me.offsetLeft + 260,
y: me.offsetTop + 5,
listeners: {
click: {
element: 'el',
fn: null
}
}
}, {
xtype: 'label',
html: '<div style="font-size:13px;"><span style="color:#0486DE;cursor:pointer" title="Foget Password">Foget Password</span></div>',
x: me.offsetLeft + 260,
y: me.offsetTop + 40,
listeners: {
click: {
element: 'el',
fn: null
}
}
}, {
xtype: 'label',
html: '<div style="font-size:12px;">Status</div>',
x: me.offsetLeft,
y: me.offsetTop + 80
}, {
xtype: 'checkbox',
boxLabel: 'Remember me',
checked: true,
x: me.offsetLeft + 150,
y: me.offsetTop + 80
}, {
xtype: 'checkbox',
boxLabel: 'Auto Sign in',
checked: false,
x: me.offsetLeft + 260,
y: me.offsetTop + 80
}, me.noticeLabel, {
xtype: 'button',
id: 'loginBt',
text: '<span style="font-size:14px;">Sign&nbsp;in</span>',
x: 360 - 90 * 2,
y: 250 - 60,
width: 80,
height: 26,
handler: me.login,
scope: me
}, {
xtype: 'button',
id: 'configBt',
text: '<span style="font-size:14px;">Settings</span>',
iconCls: 'icon-setting',
x: 360 - 90,
y: 250 - 60,
width: 80,
height: 26,
handler: null
}
];

me.callParent(arguments);
}
});

Ext.define('Tulip.Lync.MainWindow', {
extend: 'Tulip.BaseWindow',
alias: 'MainWindow',

width: 306,
height: 520,
x: Ext.getDoc().getViewSize().width * 0.68,
y: 20,
cls: 'mainWnd',
resizable: false,

initSelfPanel: function() {
return Ext.create('Ext.container.Container', {
x: 0, y: 0,
width: 'auto', height: 72,
layout: 'absolute'
});
},

initSearchBar: function() {
return Ext.create('Ext.container.Container', {
x: 6, y: 72,
width: 278, height: 47,
layout: 'absolute'
});
},

initSearchResults: function() {
return Ext.create('Ext.container.Container', {
cls: 'searchResults',
x: 6, y: 117,
width: 278, height: 355,
layout: 'absolute',
hidden: true
});
},

initSearchResultsView: function() {
Ext.define('Post', {
extend: 'Ext.data.Model',
idProperty: 'post_id',
fields: [
{name: 'postId', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'},
{name: 'topicId', mapping: 'topic_id'},
{name: 'author', mapping: 'author'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}
]
});

var forumId = 4;

var store = Ext.create('Ext.data.Store', {
model: 'Post',
proxy: {
type: 'jsonp',
url: 'http://sencha.com/forum/topics-remote.php',
extraParams: {
forumId: forumId
},
reader: {
type: 'json',
root: 'topics',
totalProperty: 'totalCount'
}
},
listeners: {
beforeload: function(){
var params = store.getProxy().extraParams;
if (params.query) {
delete params.forumId;
} else {
params.forumId = forumId;
}
}
}
});

var resultTpl = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="search-item">',
'<h3><span>{lastPost:this.formatDate}<br>by {author}</span>',
'<a href="http://sencha.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',
'<p>{excerpt}</p>',
'</div></tpl>',
{
formatDate: function(value){
return Ext.Date.format(value, 'M j, Y');
}
});

me.searchResults.add({
overflowY: 'auto',
xtype: 'dataview',
loadMask: true,
tpl: resultTpl,
store: store,
x: 1, y: 1,
width: 276, height: 325,
itemSelector: 'div.search-item',
emptyText: '<div class="x-grid-empty" style="width:200;">No Matching Threads</div>'
});

},

initFriendsPanel: function() {
return Ext.create('Ext.container.Container', {
x: 6, y: 117,
width: 278, height: 405,
items: [{
xtype: 'label',
x: 0, y: (500 - 105) / 3,
width: 300,
html: '<div style="width:100%;text-align:center;">Sign in...<br/><br/><img src="/img/chat/tool/loading.gif" style="width:130px;"/></div>'
}
],
layout: 'absolute',
});
},

initComponent: function() {
var me = this;

me.selfPanel = me.initSelfPanel(),
me.searchBar = me.initSearchResults(),
me.searchResults = me.initSearchResults(),
me.friendsPanel = me.initFriendsPanel();

me.bodyItems = [
me.selfPanel,
me.searchBar,
me.searchResults,
me.friendsPanel
];

me.callParent(arguments);
}
});

Ext.application({
name : 'Fiddle',

launch : function() {
//Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.create('LoginWindow', {renderTo: Ext.getBody()})
}
});
It loos like the whole area is not refreshed while creating Main window.

My question is how to remove the influence from Login window?

slemmon
3 Feb 2014, 1:57 PM
What if you try setting the items directly on the config of each class instead of having the base container have a body property that is a container with child items?

palakurthivishal
4 Feb 2014, 1:05 AM
Hello tiplip,
I don't know what I was tryingto resolve in your issue. But test this modified snippet of yours.

Ext.define('Tulip.BaseWindow', {
extend: 'Ext.container.Container',
alias: 'BaseWindow',

width: 400,
height: 300,
floating: true,
constrain: true,
resizable: true,
style: {
fontFamily: 'Segoe UI'
},


items: [], // http://www.sencha.com/forum/showthread.php?175588

config: {
icon: '',
title: 'Tulip Base Window',
},

minable: false,
maxable: false,
closable: true,

ox: 0, // old x
oy: 0, // old y
ow: 400, // old width
oh: 300, // old height

background: '/img/chat/winBg/default.png',
header: undefined,

body: undefined,
bodyItems: [],
bodyCls: '',
bodyLayout: 'absolute',

defCloseAction: function(e) {
var id = e.getTarget().id;
id = id.substring(0, id.indexOf('_close_bt'));
Ext.getCmp(id).destroy();
},

defMinAction: function(e) {
var id = e.getTarget().id;
id = id.substring(0, id.indexOf('_min_bt'));
Ext.getCmp(id).hide();
},

initComponent: function() {
var me = this;

if (Ext.isEmpty(me.cls)) {
me.html = '<img src="' + me.background + '" style="width:100%;height:100%"/>';
}

var titleHtml = '';
if (Ext.isEmpty(me.icon)) {
title = me.title;
} else {
titleHtml = '<span style="width:21px;height:21px;display:block;float:left;background:url('
+ me.icon + ') no-repeat;"></span><span style="width:'
+ (me.width - 95 - 30) + 'px;height:21px;margin-left:5px;line-height:21px;display:block;float:left">'
+ me.title + '</span>';
}

if (Ext.isEmpty(me.layout)) me.layout = 'absolute';

me.header = Ext.create('Ext.container.Container', {
id: me.id + '_header',
x: 0, y: 0,
width: me.width,
height: 25,
items: [{
xtype: 'label',
id: me.id + '_header_title',
html: titleHtml,
x: 5, y: 3,
width: me.width - 95
}],
layout: 'absolute'
});

me.body = Ext.create('Ext.container.Container', {
id: me.id + '_body',
x: 0, y: me.header.height,
width: me.width,
height: me.height - me.header.height,
items: me.bodyItems,
cls: me.bodyCls,
layout: me.bodyLayout
});


if (me.closeAction == null || typeof(me.closeAction) != 'function') {
me.closeAction = me.defCloseAction;
}

if (me.minAction == null || typeof(me.minAction) != 'function') {
me.minAction = me.defMinAction;
}


var tx = 0;
if (me.closable) {
me.header.add(me.createToolLabel(me.id + '_close_bt', 360, 39, 'close',
function(e) {document.getElementById(this.id).style.background = 'url(/img/chat/tool/btn_close_highlight.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(/img/chat/tool/btn_close_normal.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(/img/chat/tool/btn_close_down.png)';},
me.closeAction));
tx += 28;
}
if (me.minable) {
me.header.add(me.createToolLabel(me.id + '_min_bt', 360 - tx, 28, 'min',
function(e) {document.getElementById(this.id).style.background = 'url(img/chat/tool/btn_mini_highlight.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(img/chat/tool/btn_mini_normal.png)';},
function(e) {document.getElementById(this.id).style.background = 'url(img/chat/tool/btn_mini_down.png)';},
me.minAction));
tx += 28;
}

me.items.push(me.header, me.body);

me.draggable = {
delegate: me.id + '_header'
}

me.addListener('resize', me.resize);

me.callParent(arguments);
},

updateTitle: function(icon, title) {
if(!Ext.isEmpty(icon)) {
title = '<span style="width:21px;height:21px;display:block;float:left;background:url(' + icon + ') no-repeat;"></span><span style="width:'
+ (me.width - 95 - 30) + 'px;height:21px;margin-left:5px;line-height:21px;display:block;float:left">'
+ title + '</span>';
}
Ext.getCmp(this.id + '_header_title').update(title);
},


getBody: function(){
return this.body;
},

resize: function(cmp, width, height, opts) {
this.header.setSize(width, 25);

if (Ext.getCmp(cmp.id + '_min_bt') != null) {
Ext.getCmp(cmp.id + '_min_bt').setPosition(width - (this.ow - Ext.getCmp(cmp.id + '_min_bt').x), 0);
}
if (Ext.getCmp(cmp.id + '_max_bt') != null) {
Ext.getCmp(cmp.id + '_max_bt').setPosition(width - (this.ow - Ext.getCmp(cmp.id + '_max_bt').x), 0);
}
if (Ext.getCmp(cmp.id + '_close_bt') != null) {
Ext.getCmp(cmp.id + '_close_bt').setPosition(width - (this.ow - Ext.getCmp(cmp.id + '_close_bt').x), 0);
}

this.ow = width;
this.oh = height;

if (Ext.isEmpty(this.cls)) {
this.body.setPosition(3, 25);
this.body.setSize(width - 6, height - 30);
} else {
this.body.setPosition(6, 25);
this.body.setSize(width - 14, height - 30);
}
},


createToolLabel: function(id, x, width, sig, overHand, outHand, downHand, clickHand) {
var icon = '';
if (sig == 'min') icon = 'mini';
if (sig == 'max') icon = 'max';
if (sig == 'close') icon = 'close';
return Ext.create('Ext.form.Label', {
id: id,
x: x, y: 0,
width: width, height: 20,
style: {
background: 'url(/img/chat/tool/btn_' + icon + '_normal.png)'
},
listeners: {
mouseover: {
element: 'el',
fn: overHand
},
mouseout: {
element: 'el',
fn: outHand
},
mousedown: {
element: 'el',
fn: downHand
},
click: {
element: 'el',
fn: clickHand
}
}
});
}
});


Ext.define('Tulip.Lync.LoginWindow', {
extend: 'Tulip.BaseWindow',
alias: 'LoginWindow',
resizable: false,
id: 'loginWindow',

icon: '/img/chat/tool/connect.png',
title: 'Sign in',
offsetTop: 60,
offsetLeft: 30,


login: function() {
var me = this,
user = me.username.getValue(),
passwd = me.password.getValue();

if (user == null || user.length == 0) {
me.noticeLabel.setText('<font color="red">Please input username</font>', false);
return
}
if (passwd == null || passwd.length == 0) {
me.noticeLabel.setText('<font color="red">Please input password</font>', false);
return
}
me.removeAll(true);
me.hide();

Ext.create('Tulip.Lync.MainWindow').show();

},

initComponent: function() {
var me = this;

me.username = Ext.create('Ext.form.field.Text', {
name: 'uid',
inputType: 'text',
x: me.offsetLeft + 70,
y: me.offsetTop,
width: 180,
height: 27,
emptyText: 'Username',
selectOnFocus: true, enableKeyEvents: true,
initEvents: function() {
var keyPress = function(e){
if (e.getKey() == e.ENTER) {
me.login()
}
};
this.el.on("keypress", keyPress, this);
}
});
me.password = Ext.create('Ext.form.field.Text', {
name: 'password',
inputType: 'password',
x: me.offsetLeft + 70,
y: me.offsetTop + 35,
width: 180,
height: 27,
emptyText: 'Password',
selectOnFocus: true, enableKeyEvents: true,
initEvents: function() {
var keyPress = function(e){
if (e.getKey() == e.ENTER) {
me.login()
}
};
this.el.on("keypress", keyPress, this);
}
});
me.noticeLabel = Ext.create('Ext.form.Label', {
x: me.offsetLeft,
y: me.offsetTop + 95
});

me.bodyItems = [{
xtype: 'label',
html: '<div style="font-size:14px;">Username</div>',
x: me.offsetLeft,
y: me.offsetTop + 3
}, me.username, {
xtype: 'label',
html: '<div style="font-size:14px;">Password</div>',
x: me.offsetLeft,
y: me.offsetTop + 38
}, me.password, {
xtype: 'label',
html: '<div style="font-size:13px;"><span style="color:#0486DE;cursor:pointer" title="Register">Register</span></div>',
x: me.offsetLeft + 260,
y: me.offsetTop + 5,
listeners: {
click: {
element: 'el',
fn: null
}
}
}, {
xtype: 'label',
html: '<div style="font-size:13px;"><span style="color:#0486DE;cursor:pointer" title="Foget Password">Foget Password</span></div>',
x: me.offsetLeft + 260,
y: me.offsetTop + 40,
listeners: {
click: {
element: 'el',
fn: null
}
}
}, {
xtype: 'label',
html: '<div style="font-size:12px;">Status</div>',
x: me.offsetLeft,
y: me.offsetTop + 80
}, {
xtype: 'checkbox',
boxLabel: 'Remember me',
checked: true,
x: me.offsetLeft + 150,
y: me.offsetTop + 80
}, {
xtype: 'checkbox',
boxLabel: 'Auto Sign in',
checked: false,
x: me.offsetLeft + 260,
y: me.offsetTop + 80
}, me.noticeLabel, {
xtype: 'button',
id: 'loginBt',
text: '<span style="font-size:14px;">Sign&nbsp;in</span>',
x: 360 - 90 * 2,
y: 250 - 60,
width: 80,
height: 26,
handler: me.login,
scope: me
}, {
xtype: 'button',
id: 'configBt',
text: '<span style="font-size:14px;">Settings</span>',
iconCls: 'icon-setting',
x: 360 - 90,
y: 250 - 60,
width: 80,
height: 26,
handler: null
}
];

me.callParent(arguments);
}
});


Ext.define('Tulip.Lync.MainWindow', {
extend: 'Tulip.BaseWindow',
alias: 'MainWindow',
offsetTop: 60,
offsetLeft: 30,
width: 300,
height: 300,

cls: 'mainWnd',
resizable: false,



initComponent: function() {
var me = this;

me.items = [{xtype : 'displayfield', value : 'Voila...!!!!'}];

me.callParent(arguments);
}
});


Ext.application({
name : 'Fiddle',


launch : function() {
//Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.create('LoginWindow', {renderTo: Ext.getBody()})
}
});

tiplip
12 Feb 2014, 4:02 AM
Hi all, thanks for your help.
I reset items in BaseWindow::initComponent and resolved


Ext.define('Tulip.BaseWindow', {

initComponent:function() {
This.items = [];
}
});