We Keep Coding

Ext.XTemplate() not rendering when added dynamically inside a component.EXTJs

I'm adding the components dynamically in a container using the:
this.add() method
code:
init: function() {
var combo = new Ext.BoxComponent({
tpl: new Ext.XTemplate("<div>hellow</div>")
})
this.add(combo)
this.doLayout();
}
However when I add Ext.XTemplate() its not rendering, but whenn I add components like Ext.Button or Ext.ComboBox, they render perfectly.
Any ideas why its only the template that is having issues rendering?
Thanks

With the syntax I assume its ExtJS 3.4.
You are missing data property for the template.
A template always needs a store or data parameter which is treated as datasource for it.
init: function() {
var combo = new Ext.BoxComponent({
data: [{name:"Saurabh"}],
tpl: new Ext.XTemplate("<div>{name}</div>")
})
this.add(combo)
this.doLayout();
}
Here is working POC code:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'Xtemplate usage demo',
items: [{
xtype: 'panel',
listeners: {
afterrender: function () {
var combo = new Ext.BoxComponent({
data: {name:"Saurabh"},
tpl: new Ext.XTemplate("<div>hellow {name}</div>")
});
var combo2 = new Ext.BoxComponent({
data: [{name:"Saurabh"}, {name: "User1234"}],
tpl: new Ext.XTemplate('<tpl for="."><div>hellow {name}</div></tpl>')
});
this.add(combo);
this.add(combo2);
this.doLayout();
}
}
}]
});
});
Here is link to working fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/2rpg

How to slideIn hidden component in ExtJS?

I've got the following situation: some controls that are located next to a button and are slided in and out on button click.
Ext.define ('Site.widget.SomeButton', {
extend: 'Ext.button.Button',
xtype: 'SomeButton',
width: 30,
controlled_inputs: null,
expanded: false,
setControlledCmp: function(controlledInputs) {
var me = this;
me.on('click', function(){
if (me.expanded)
controlledInputs.getEl().slideOut('r', { duration: 250 });
else
controlledInputs.getEl().slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
});
Ext.define('Site.widget.ComingOut', {
extend: 'Ext.Container',
xtype: 'ComingOut',
layout: 'hbox',
header: false,
referenceHolder: true,
items:[{
xtype: 'SomeItems',
reference: 'SomeItems'
},{
xtype: 'SomeButton',
reference: 'SomeButton'
}],
onBoxReady: function() {
me.lookupReference('SomeButton').setControlledItems(me.lookupReference('SomeItems'));
}
});
The code works fine when the controls are initially shown. The question is: what should I do if I want them to be initially hidden? hidden:false is not the option since when controls are hidden the button moves into the freed position. I suppose I am missing something easy here. Thank you in advance!
PS I've found solution, though it doesn't seem good enough (hides element instead of correctly setting its initial state), so if anyone knows a better one - you are welcome. My solution is the following
setControlledCmp: function(controlled_inputs) {
var me = this;
me.on('click', function( view, eOpts ){
controlled_inputs.setOpacity(1);
if (me.expanded)
controlled_inputs.slideOut('r', { duration: 250 });
else
controlled_inputs.slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
and
onBoxReady: function() {
var me = this;
var inputs = me.lookupReference('search_inputs').getEl();
inputs.setOpacity(0);
inputs.slideOut('r', { duration: 5 });
me.lookupReference('search_button').setControlledCmp(inputs);
}

Get my tabpanel component but cant use add to add a tab

i have a tabpanel in view makemoney.js. and i want write code in my controller addtab.js . but i have encounter a error in my chrome console.
and i have found that the Ext.ComponentQuery.query('itemId')[0] return type is component,but the tabpanel's add method must make the container.add is container.is it the cause.if right, what can i change
my makemoney.js code:
Ext.define('ylp2p.view.makemoney',{
extend: 'Ext.Panel',
xtype: 'makemoney',
requires: [
'Ext.Toolbar',
'Ext.tab.Panel'
],
config:{
layout: 'vbox',
items:[
{
xtype: 'toolbar',
docked: 'top',
title: '111'
},
{
xtype: 'tabpanel',//-----here is my tappanel
itemId: 'tabfirst',
flex: 1,
tabBar: {
layout: {
pack: 'center'
}
}
}
]
}
});
and my controller code:
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
launch: function(){
var moneytab = Ext.ComponentQuery.query('.makemoney #tabfirst')[0];
//i think i get the component alerdy
var myPanel = Ext.create('Ext.Panel', {
html: 'This will be added to a Container'
});
//and write a panel
moneytab.add([myPanel]);
//make the panel into the tap.i dont why it not work
}
});
my console in chrome put an error:
Uncaught Error: [ERROR][Ext.Container#doAdd] Adding a card to a tab container without specifying any tab configuration

It will work
var moneytab = Ext.ComponentQuery.query('makemoney #tabfirst')[0];
var myPanel = Ext.create('Ext.Panel', {
html: 'This will be added to a Container',
title: 'Yourtitle'
});
//and write a panel
moneytab.add(myPanel);

Your selector is not correct, that's the reason of the error.
var moneytab = Ext.ComponentQuery.query('.makemoney #tabfirst')[1];
moneytab = undefined;
Use this instead:
var moneytab = Ext.ComponentQuery.query('tabpanel #tabfirst')[0];

ExtJS 4 setting Loading mask for the viewport

I'm trying ti set up a loading mask for my viewport, because it takes a lot of time to load it. I've tried this:
Ext.define('MY.view.Viewport', {
extend: 'Ext.Viewport',
alias: 'widget.dispviewport',
initComponent: function() {
var me = this;
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
// myMask.show();
Ext.apply(me, {
id : 'main-viewport',
listeners: {
beforerender: function() {
myMask.show();
},
afterrender: function() {
myMask.destroy();
}
},
renderTo: 'id-sym-container',
layout: {...
but it seems that I never get into beforerender. I tried with console.log in the beforerender function and it also doesn't appear. When I try like this:
Ext.define('MY.view.Viewport', {
extend: 'Ext.Viewport',
alias: 'widget.dispviewport',
initComponent: function() {
var me = this;
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
Ext.apply(me, {
id : 'main-viewport',
listeners: {
// beforerender: function() {
// myMask.show();
// },
afterrender: function() {
myMask.destroy();
}
},
it works but my mask is showing way too late. Am I using beforerender wrong way and what's the way to start myMask exactly when my Viewport starts to render?
Thanks
Leron

Your code isn't setting a loading mask for the viewport, but for the body
Ergo what you can do is, the bit of code that does...
Ext.create('MY.view.Viewport');
should look like..
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
viewport = Ext.create('MY.view.Viewport');
viewport.on('afterrender',function(){myMask.destroy();},this);
The guys in the comments are right though :P

In ExtJs 4, you can declare the loadmask in the viewport:
Ext.define('Tps.view.Viewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.viewport',
initComponent: function () {
Ext.apply(this, {
layout: 'fit',
items: [
{
xtype: 'loadmask',
id: 'load-indicator',
indicator: true,
hidden: true,
target: this
}
]
});
this.callParent();
}
});
Note the target config is the viewport itself.
To show/hide the load mask, make a call to
Ext.getCmp('load-indicator').show();
Ext.getCmp('load-indicator').hide();
Show the load mask in the render event for the viewport or set the hidden config to false.

ExtJs replacable items

I want to create something like this
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.create('Ext.Viewport', {
layout: 'fit',
id: 'cmpWithReplacebleItems'
});
Ext.getCmp('cmpWithReplacebleItems').items = [new SomeComponent()];
});
code of SomeComponent
SomeComponent = Ext.extend(Ext.Viewport, {
layout: 'fit',
items: [{
xtype: 'panel',
html: 'test',
title: 'My Panel'
}]
});
As you can see i want 'cmpWithReplacebleItems' items to be replaceble. But when i try this code i get some errors while resizing...
The question is.. what is the right way to do this?

After a component is constructed, you can't modify the items directly like that. You want to use the Ext.Container methods add, remove, or removeAll to modify the items.
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.create('Ext.Viewport', {
layout: 'fit',
id: 'cmpWithReplacebleItems'
});
var cmp = Ext.getCmp('cmpWithReplacebleItems');
cmp.add(new SomeComponent());
cmp.doLayout(); //important to layout again after adding/removing
});