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];
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
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.
I am trying to handle clicks on ext.js panel header (living inside of an accordion with other panels..), now the header is an extended header, and it contains a number of items (not tools) in it. Problem is that when I set titleCollapse:true, clicks on my items are propagated to the header, which collapses.
I want to set titleCollapse:true so I the users will be able to collapse/expand by clicking the header and not only the collapse tool. But, then, this problem..
let me answer myself...
Ext.define("WebPhone.view.CallLogListHeader", {
extend: 'Ext.panel.Header',
xtype: 'callLogListHeader',
layout:
{
type: 'hbox',
align: 'middle',
pack: 'end'
},
//titlePosition: 0,
items:
[
{
xtype: 'button',
text: '',
cls: 'ClearCallLogButtonCls',
handler: function () {
var me = this;
me.container.component.handledByTool = true;
var view = Ext.create('WebPhone.view.ApproveClearLogs');
view.show();
}
}
],
initComponent: function()
{
var me = this;
me.callParent( arguments );
me.handledByTool = false;
},
listeners:
{
click: function()
{
var me = this;
if( me.handledByTool )
{
me.handledByTool = false;
return;
}
var parent = me.findParentByType( 'contact-list-view' );
if( parent.collapsed )
parent.expand();
else
parent.collapse();
}
}
});
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 :)
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
});