We Keep Coding

Custom HTML - Rally TreeGrid

Hello i am receiving an error from the code below, and not sure why because i thought i was defining it. I want to make sure my code is working properly before i add complexity to the report.
launch: function() {
this._createGrid();
},
_createGrid: function() {
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['PortfolioItem/Initiative'],
autoLoad: true,
enableHierarchy: true
}).then({
success: function(store) {
var myGrid = Ext.create('Ext.Container', {
items: [{
xtype: 'rallytreegrid',
columnCfgs: ['Name', 'Owner'],
store: store
}],
renderTo: Ext.getBody()
});
}
});
this.add(myGrid);
},
});
"Error: success callback for Deferred transformed result of Deferred transformed result of Deferred threw: ReferenceError: myGrid is not defined"
I am new to this so any help would be greatly appreciated!

You issue you're running into is probably due to some confusion in how components and containers behave in ExtJS combined with the this scoping issue mentioned in the answer above.
Here's how I would write it:
_createGrid: function() {
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['PortfolioItem/Initiative'],
autoLoad: true,
enableHierarchy: true
}).then({
success: function(store) {
//The app class is already a container, so you can just
//directly add the grid to it
this.add({
xtype: 'rallytreegrid',
itemId: 'myGrid',
columnCfgs: ['Name', 'Owner'],
store: store
});
},
scope: this //make sure the success handler executes in correct scope
});
}
You also don't need to feel like you need to keep a myGrid reference around since you can always find it using the built-in component querying feature of ExtJS:
var myGrid = this.down('#myGrid');

You're defining myGrid inside of the success function scope, then trying to use it at the end of the _createGrid function, where it is undefined. I assume you're trying to do it that way because this is not bound correctly inside the success function. Try this instead:
_createGrid: function() {
var self = this;
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['PortfolioItem/Initiative'],
autoLoad: true,
enableHierarchy: true
}).then({
success: function(store) {
var myGrid = Ext.create('Ext.Container', {
items: [{
xtype: 'rallytreegrid',
columnCfgs: ['Name', 'Owner'],
store: store
}],
renderTo: Ext.getBody()
});
self.add(myGrid);
}
});
},

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

Tree panel in extjs 5 not rendering

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.

ExtJS setting a textareafield setValue()

Im learning Extjs and have a problem , when i try to append new text to an item i get an error tf.setValue is not a function same goes for getValue. When i try setVisible it works like it should be.
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'app',
controllers:[
],
appFolder: 'app',
launch: function() {
var panel = new Ext.form.FormPanel({
renderTo:Ext.getBody(),
title:'Panel',
width:400,
bodyPadding: 10,
autoHeight:true,
items:[{
xtype:'textareafield',
name: 'textInput',
id:'textId',
value:'why not'
},{
xtype:'button',
text:'Helllo',
handler:function(){
console.log('button click')
var tf = Ext.get('textId');
tf.setValue('This should change!')
}
}],
});
}
});
Thanks

That's because Ext.get() will return an Ext.Element.
What you want to use is Ext.getCmp('textId') which will return the component.
The Element is basically the Ext wrapper round the Dom element, so it has methods like setVisible, but you want to get the text area component, which has all the methods you're after.

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