We Keep Coding

Ext JS 4.2 paging combo - how to skip to page

I have a Combo such as:
{
xtype : 'combo',
anchor : '70%',
id : 'companyCombo',
fieldLabel : 'Company',
name : 'COMPANY_ID',
store: companyStore,
pageSize: 25,
displayField : 'COMPANYNAME',
valueField : 'COMPANY_ID',
typeAhead : true,
queryMode : 'local',
forceSelection : true,
allowBlank : false,
editable : true
},
When using a paging Combo Box with Ajax data, I am advised to first determine (via Ajax) which 'page' the current item is on, and then set the Combo's page to that via:
pagingtoolbar.move(pageNumber)
The problem is, I'm not sure how to get a reference to pagingtoolbar for the Combo. It doesn't seem to correspond to any of the member fields of the object returned via Ext.getCmp('companyCombo')...

The toolbar is on the combo's picker, not the combo itself. Try this:
var combo = Ext.getCmp('companyCombo'),
toolbar = combo.getPicker().pagingToolbar;

Extjs Toolbar crash, extjs 4.2.1, Chrome, Windows

Verry weird bug when developing a application. The toolbar dissapears whenever i add a button to it. The code is as follows:
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : window,
height: window,
items: [
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
'-',
{
xtype : 'button'
// icon: 'img/cross_cursor.gif'}
}
]})
No errors encountered

Height and width point to window object. Give your toolbar an explicit width or no dimensions whatsoever. See https://fiddle.sencha.com/#fiddle/cfn

SenchaTouch 2 : Same toolbar used across the views is firing the same event multiple times

BackGround:
I am using the same toolbar in all my views which is defined in a separate view. This toolbar has four buttons. Since this button has 'id' attribute,
tap event on one button from a view will trigger similar tap events from other views as well since the same toolbar is used across the views.
My Toolbar is as below.
Ext.define("WU.view.WUToolBar", {
extend: "Ext.Toolbar",
alias: "widget.wuToolBar",
xtype:"wuToolBar",
config: {
docked : 'bottom',
cls : 'tabBar',
ui:'widgetBottombarUI',
items : [
{
xtype : 'button',
text : 'My Account',
cls : 'profileTabBar',
id : 'myProfileButton',
listeners : {
tap : function(button, e, eOpts) {
console.log('myProfileButton is clicked');
}
},
{
xtype : 'button',
text : 'Help',
cls : 'helpTabBar',
id : 'helpTabButton',
listeners : {
tap : function(button, e, eOpts) {
console.log('helpButton is clicked');
}
},
]
},
});
I am adding this to my different views in the items config as below.
xtype : 'wuToolBar'
So, tap event on a button in a single view will fires the tap event from all the views since this toolbar is shared across the pages. If I am removing the
id attribute then application works fine but I need to assign the id to the button since I have to access them using getCmp method.

If it is on all views, then I would suggest adding it in your app.js, and then simply add to the Viewport when you move from screen to screen:
In app.js:
...
launch: function() {
...
// Add static components
Ext.Viewport.add([
{
xtype: 'wuToolBar'
docked: 'bottom' // I would recommend moving this out of your customized config
}
]);
...
},
...
You can add a view later using the same method (Ext.Viewport.add(...)), or you can use the Ext.navigation.View component.

TreeNode click event on ExtJs 4

I'm using ExtJS 4 (beta 3) and I have a TreePanel that is my kind of navigation menu.
It is something like this:
Jobs
Add Job
List All Jobs
...
...
...
(this will be made on a permission system base, but that's another story)
On ExtJS 3, do something when i clicked "Add Job" was as simple as adding
...
leaf:true,
listeners:{
click:function(n){
//my code...
}
}
...
to the root children elements.
Now It's not that simple. The closer i got was with (on the treepanel)
listeners:{
click : {
element : 'el',
fn : function(eve, elem, obj){
console.log(node);
console.log(elem);
console.log(obj);
}
}
}
So, maybe i'm just a noob, maybe i have already a strong hatred for ExtJS, maybe is just a problem in this beta version, but...
How do I add a listener to the click event on the tree nodes? (the Select event won't do what i need)
Thank you guys.
EDIT: Currently testing with this, and it's not working.
... = Ext.create('Ext.tree.TreePanel', {
region : 'west',
collapsible : false,
title : 'ITMI',
width : 220,
margins : '5 5 5 5',
cmargins : '5 5 5 5',
hideHeaders : true,
useArrows : true,
rootVisible : false,
headers: [{
xtype : 'treeheader',
text : 'Nome',
flex : 1,
dataIndex: 'nome'
}],
store: store,
listeners:{
itemclick: function(n){
console.info(n);
}
}
...
EDIT 2: The itemclick event now works (on EXJS 4 final), It still doesn't solve my problem. I'd Like to call a specific function when i call each treenode. Before it was really easy. Now i can't figure it out.

in ext4 beta3 (maybe in final release too)... there is no longer click event....
this has changed to itemclick more info
var tree = Ext.create('Ext.tree.Panel', {
store: store,
renderTo: Ext.getBody(),
height: 300,
width: 250,
title: 'Files',
listeners:{
itemclick: function(n){
console.info(n);
}
}
});

So, It may help some people who may be struggling with the same issue I did then.
The "itemclick" event is the way to handle leafs clicks, and it didn't work then for reasons I don't remember.
I accomplished what I needed by splitting the config I had in the database, something like
controllerName|functionName
and then call this code on the handler of the "itemclick:
this.getController(ctr)[fn]();
where ctr is the controllerName and fn is the functionName. This could easily be done with eval, but I prefer not to.

I could not get itemclick to fire with IE (fine in Chrome). I modified my code to use 'checkchange' and it works fine.

How to create an advanced wizard form usingcard layout on Extjs 3.2?

There was an Ext.ux.wizard for extjs 2.0 which we could create wizard like forms for extjs and easily validate form elements when user clicked (eg)next button.see demo here: http://www.siteartwork.de/wizardcomponent_demo . On extjs 3.2 there is card layout which helps creating wizards.see demo: http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html .
Code:
/*
* ================ CardLayout config (Wizard) =======================
*/
var cardWizard = {
id:'card-wizard-panel',
title: 'Card Layout (Wizard)',
layout:'card',
activeItem: 0,
bodyStyle: 'padding:15px',
defaults: {border:false},
bbar: ['->', {
id: 'card-prev',
text: '« Previous',
handler: cardNav.createDelegate(this, [-1]),
disabled: true
},{
id: 'card-next',
text: 'Next »',
handler: cardNav.createDelegate(this, [1])
}],
items: [{
id: 'card-0',
html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p><p>Almost there. Please click the "Next" button to continue...</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}]
};
but there seems no validations when i click next or there is no submit button when i reach last step of wizard.does anybody have any examples on a more developed wizard?

Check this thread - http://www.sencha.com/forum/showthread.php?121059-Making-a-Wizard&highlight=wizard
Or use ready extension - http://code.google.com/p/ext-ux-wiz/ (it seems to be working with ExtJS 3.2), the forum thread for it is here - http://www.sencha.com/forum/showthread.php?36627-2.1-Ext.ux.Wiz-a-wizard-component-for-Ext-JS/page25