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
});
Related
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
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];
The tree panel doesn't get rendered
Code is :
Ext.define('mainPanel',{
extend:'Ext.form.Panel',
layout: {
type: 'hbox',
align: 'stretch'
},
width:'100%',
height:'100%',
title:'SQL',
initComponent:function()
{
var tableDiv = this.getTableColumn();
var analyzerDiv = this.getAnalyzerColumn();
var fieldDiv = this.getfieldColumn();
this.items=[tableDiv,analyzerDiv,fieldDiv];
this.callParent();
},
getTableColumn:function()
{
var TableColumn = Ext.create('Ext.tree.Panel',{
title:'Tables',
width:'20%',
heigth:'100%',
layout: 'fit',
border:true,
store: tableTreeStore,
rootVisible: false
});
return TableColumn;
}
Pls let me know where i am going wrong. Thanks in advance
the error i get is
TypeError: c is not a constructor
return new c(a[0])
Please check this Sencha fiddle that i created for you.
This error exists when you are trying to override initComponent in default component of Extjs.
For example:
Ext.define('Ext.panel.Panel',{
initComponent: function(){
//YourCode
}
});
Or
Ext.create('Ext.panel.Panel', {
initComponent: function(){
//Yourcode
}
});
If you want eradicate this error from your code you need to for example define your custom Component - CustomPanel that extend Extjs component:
var panel = Ext.define('CustomPanel', {
extend: 'Ext.panel.Panel',
width:300,
heigth:400,
layout: 'fit',
initComponent: function(){
var tableDiv = this.getTableColumn();
this.items=[tableDiv];
this.callParent();
},
getTableColumn:function() {
return Ext.create('Ext.tree.Panel',{
title:'Tables',
width:300,
heigth:400,
layout: 'fit',
border:true,
store: tableTreeStore,
rootVisible: false
});
}
});
And somewhere in your code - creation of CustomPanel:
Ext.create('CustomPanel', {
});
Hope this is something that you were looking for.
Disclaimer: I am relatively new to ExtJS (version 5.01). I am hoping to reach some ExtJS experts to point me in the right direction:
I am getting an error when specifying an initComponent method within an items config. The code below generates the error:
"Uncaught TypeError: Cannot read property 'items' of undefined"
The error disappears when the 'initComponent' function of the north-child panel is commented out. I have the feeling I missed something on initialization order.
Q: How can I specify an initComponent method of a child item within the items configuration?
Ext.define('MyApp.view.TestView', {
extend: 'Ext.panel.Panel',
title: 'Parent',
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
title: 'North Child',
/* Problematic function: If commented, it works */
initComponent: function(){
console.log("test north child");
this.callParent(arguments);
}
}],
initComponent: function(){
console.log("Test parent");
this.callParent(arguments);
}
});
Short answer: You can't define initComponent on a child, because you can't do anything there that can't be done anywhere else.
InitComponent is executed when an instance of the component 'MyApp.view.TestView' is created (you only defined it here, using Ext.define). It can be created using Ext.create('MyApp.view.TestView',{, or by creating another view that has this component added as an item, or by deriving another component (extend:'MyApp.view.TestView').
All the child components are also created when 'MyApp.view.TestView' is created, so the initComponent function on the child would be superfluous, because the child cannot be created without the parent, so the initComponent of the parent can be used for everything that you want to do in the child's initComponent.
If you need sth. to be calculated before the items can be addded, you would proceed as follows:
Ext.define('MyApp.view.TestView', {
extend: 'Ext.panel.Panel',
title: 'Parent',
height: 300,
layout: 'border',
initComponent: function(){
var me = this,
tf = Ext.getCmp("someTextField"),
myTitle = (tf?tf.getValue():'');
Ext.applyIf(me,{
items: [{
xtype: 'panel',
region: 'north',
title: myTitle,
}]
});
this.callParent(arguments);
}
});
Please refer to the docs what exactly Ext.applyIf does (and how it differs from Ext.apply, because that function also comes handy sometimes).
I’m trying to add different detail view based on taped item in list.
I have home screen that is using List component and this view is displaying ['Real estate', 'Vehicles', 'Jobs']... as menu items.
Based on selected item in list, I want to display different view.
And I want to follow MVC design pattern..
Here is some code...
App.js
Ext.application({
name: 'App',
controllers: ['Main'],
views: ['Viewport', 'HomePage'],
stores: ['HomePageItems'],
models: ['HomePageItem'],
launch: function () {
Ext.Viewport.add(Ext.create('App.view.Viewport'));
}
});
Viewport.js
Ext.define("App.view.Viewport", {
extend: 'Ext.navigation.View',
requires: [ 'App.view.realestate.Realestate',
'App.view.HomePage',
'App.view.jobs.Jobs',
'App.view.other.Other',
'App.view.vehicles.Vehicles'
],
config: {
items: [
{
xtype: 'homepage'
}
]
}
});
HomePage.js ( xtype = "homepage" )
Ext.define('App.view.HomePage', {
extend: 'Ext.List',
xtype: 'homepage',
id: 'homepage',
config: {
title: 'Oglasi',
itemTpl: '<strong>{name}</strong><p style="color:gray; font-size:8pt">{description}</p>',
store: 'HomePageItems',
onItemDisclosure: true
}
});
Main.js
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: '#homepage'
},
control: {
'homepage': {
disclose: 'HookUpDetailView'
}
}
},
HookUpDetailView: function (element, record, target, index, ev) {
// TO DO: I have 4 differente views to load programmaticaly based on selected item in List
//'App.view.realestate.Realestate'
//'App.view.jobs.Jobs'
//'App.view.other.Other'
//'App.view.vehicles.Vehicles'
}
});
I found one example, but it's not working for me (push method doesn't exist)
this.getMain().push({
xtype: 'realestatehome'
});
Thank in advance!
The method you're looking for is
http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-add
this.getMain().add({xtype: 'realestatehome'});
But what you have doesnt make sense, realestatehome is a list, you can't add a component under it. You need to read about layoutsFrom the link above
Push should work. You could try something like this.
HookUpDetailView: function (list, record) {
if(record.data.description==='real estate'){
this.getRealEstate().push({
xtype: 'realestatehome',
title: record.data.description,
data. record.data
});
if(record.data.description==='Vehicles'){
this.getVehicles().push({
xtype: 'vehicles',
title: record.data.description,
data. record.data
});
}
}
And a particular view could look like
Ext.define('App.view.RealEstateHome', {
extend: 'Ext.Panel',
xtype: 'realestatehome',
config: {
styleHtmlContent: true,
scrollable: 'vertical',
tpl: [
'{description}, {example}, {example}, {example}'
]
}
});
And the refs to access your particular view should look something like
refs: {
realEstate: 'realestatehome',
vehicles: 'vehicleshome'
},
Hope that helps
I made a mistake in controller this.getMain()
get main is returning Ext.List and I need Ext.navigation.View that have 'push' method.
So... I added xtype and id to my viewport ("container")
and quick change in my controller solved my troubles...
refs: {
main: '#homepage',
container: '#container'
}
and instead of getting Ext.List object
this.getContainer().push({
xtype: 'realestatehome'
});
And this work like a charm :)