Develop Reference

How to Call an Extjs store without creating an explicit instance of it

I have an application which has is its first page build with different component.I am creating a userStore instance on page load(main.js) I want to access userStore in my header to get the firstname of user and display it on the header section.
Ext.create('store.User', {
storeId : 'storeUser'
});
Ext.define('OnlineApp.view.Main', {
extend : 'Ext.panel.Panel',
xtype : 'app-main',
requires : [
'Ext.plugin.Viewport'
],
controller : 'main',
viewModel : 'main',
layout : 'border',
padding : '0 0 0 0',
bodyStyle : 'border:0',
items : [
{
xtype : 'appHeader',
region : 'north'
},
{
xtype : 'tabpanel',
region : 'center',
bodyPadding : 0,
id : 'contentPanel',
reference : 'contentPanel',
layout : 'card',
border : false,
scrollable : true,
tabBar : {
hidden : true
},
items : [
firstPage,
contentFrame,
],
},
{
xtype : 'footer',
region : 'south'
}
]
});
** This is a Header file where I am trying to use the store below. Not sure what could be the best way to call store without creating a instance.**
Ext.define('OnlineApp.view.Header', {
extend: 'Ext.container.Container',
xtype : 'appHeader',
id : 'main-header',
height : 100,
layout : {
type : 'hbox',
align : 'middle'
},
initComponent: function() {
this.items = [
{
xtype : 'container',
flex : .55,
layout : {
type: 'vbox',
align : 'right'
},
collapsible : false,
padding : 5,
items : [
{
xtype : 'container',
id : 'app-header-user',
ui : 'usp-plain-button',
layout : {
type : 'hbox',
align : 'center'
},
items : [
{
xtype : 'component',
html : 'Welcome, <b>' + Ext.getStore('storeUser').data.firstname + '</b>' **// I am trying to use the store getting fiest name as undefined.**
},
{
xtype : 'gear-menu'
}
]
},
}
];
this.callParent();
}
});

If we assume that you have correctly generated/defined store. You have Ext.define('store.User') somewhere. Otherwise you should use Ext.create('Ext.data.Store',{storeId: 'storeUser'});
So Ext.getStore('storeUser') is returning store object in your header view. You can't just use data.firstname on it. Because data property in the store is Ext.util.Collection.
If you want to get data from your store you should use:
Ext.getStore('storeUser').getAt(0).get('firstname')
Where 0 is the index of the record in your store.
Btw in your case I would recommend you to use Ext.Temaples you can check the official example here. Or here is quite OK example on the stackoverflow.

Calling Function in ExtJS

I am trying to call a function from ExtJS popup but it is not identifying the method. I guess I am missing the scope. Please take a look at the code below and suggest where am I going wrong.
In the below code section the handler: function () is not calling the intended method.
Ext.define('App.controller.MakerController', {
extend : 'Ext.app.Controller',
models : [],
stores : [],
views : [ 'makertabpanel' ],
init : function() {
this.control({
'makertabpanel button[name= addNewUser]' : {
click : this.openDialog
},
'makertabpanel button[name= modifyUser]' : {
click : this.openmodifyDialog
}
});
},
openmodifyDialog : function() {
var userinfoGrid = Ext.getCmp('userinfogridID');
if (userinfoGrid.getSelectionModel().hasSelection()) {
var row = userinfoGrid.getSelectionModel().getSelection()[0];
console.log(row.get('id'));
var name = Ext.getCmp('usernameID').setValue(row.get('id'));
var name = Ext.getCmp('userFirstName').setValue(row.get('fname'));
var name = Ext.getCmp('userLastName').setValue(row.get('lname'));
}
this.openDialog();
},
openDialog : function() {
//var that = this;
var dialog = Ext.create('Ext.window.Window', {
title : 'Permission Uesr',
itemId : 'adduserpopup',
id : 'adduserpopup',
closeAction: 'hide',
modal : true,
width : 1000,
height : 400,
layout : {
type: 'vbox',
align: 'stretch',
padding: 5
},
resizable : false,
items : [ createuserinformation,itemselectorGrid],
buttons : [ {
text : 'Save',
id : 'okbutton',
handler: function () {
console.log("Save user Data 1 :"+this.up('window'));
//this.up('window').saveUserData();
this.saveUserData(); // this is not working
}
} ]
});
dialog.show();
},
saveUserData : function() {
alert("Save user Data");
// create an AJAX request
}
});

how about:
openDialog : function() {
var me = this;
var dialog = Ext.create('Ext.window.Window', {
title : 'Permission Uesr',
itemId : 'adduserpopup',
id : 'adduserpopup',
closeAction: 'hide',
modal : true,
width : 1000,
height : 400,
layout : {
type: 'vbox',
align: 'stretch',
padding: 5
},
resizable : false,
items : [ createuserinformation,itemselectorGrid],
buttons : [ {
text : 'Save',
id : 'okbutton',
handler: function () {
console.log("Save user Data 1 :"+this.up('window'));
me.saveUserData(); // instead using this use local variable me
}
} ]
});
dialog.show();
},

Uncaught TypeError: Object #<Object> has no method 'apply' error

I have the error Uncaught TypeError: Object #<Object> has no method 'apply' when I click on Edit button. Here is my panel :
Ext.define(
"ux.panel.MyPanel", {
extend : "Ext.form.Panel",
xtype : "MyPanel",
title : "Bla bla title"
initComponent : function () {
ux.panel.MyPanel.superclass.initComponent.call(this);
},
init : function (initParameters) {
this.initParameters = initParameters;
this.removeAll(true);
if (this.initParameters == null)
return;
},
editSomething : function () {
alert("editTV");
},
tbar : [{
text : "Edit"
iconCls : "silk-edit-16",
id : "editbutton",
disabled : false,
listeners : {
click : {
scope : this,
fn : this.editSomething
}
}
}, {
text : "Remove",
iconCls : "silk-delete-16",
id : "removeButton",
disabled : false,
listeners : {
click : {
scope : this,
fn : function () {
alert("RemoveTV");
}
}
}
}
]
});
This panel is included in a page composed of many other panel. I'm doubting that this in the this.editSomething is not pointing to my panel. I don't have any clue about how to deal with this.
Anyone has any idea about the reason please?

That is because this is not what you expect it to be.
Add the tbar in the initComponent function, like:
initComponent: function () {
Ext.apply(this, {
tbar: [{
text: "Edit",
iconCls: "silk-edit-16",
id: "editbutton",
disabled: false,
listeners: {
click: {
scope: this,
fn: this.editSomething
}
}
}, {
text: "Remove",
iconCls: "silk-delete-16",
id: "removeButton",
disabled: false,
listeners: {
click: {
scope: this,
fn: function () {
alert("RemoveTV");
}
}
}
}]
});
this.callParent(arguments);
}
http://jsfiddle.net/gkcU7/

Change hyperlink text dynamically in Extjs

Below is the code by which I am creating a link in my page using ExtJS:
var linkTransValues = {
xtype: 'box',
id : 'testId',
hidden : true,
autoEl: {
tag: 'a',
href: 'javascript:addCategoryValue()',
html: 'Add Transition Category'
}
}
Now what I want is when user select value from one combo box whatever combo box description is there that description should come in link text here is my code I am calling on select of combo box:
transType.on('select', function(cbox, rec, index) {
Ext.getCmp("testId").transId = cbox.getValue();
Ext.getCmp("testId").autoEl.html="dropdown description";
Ext.getCmp("testId").show();
});
Problem is that it is changing the html value but new value not reflecting its showing the initial value only how to change link value. How can I change that?

Try
var linkTransValues = {
xtype: 'box',
id : 'testId',
hidden : true,
autoEl: {tag: 'a', id: 'my-element', href: 'javascript:addCategoryValue()', html: 'Add Transition Category'}
};
Ext.get('my-element').update('new value');

enter code here
View File :
Ext.define('ExtMVC.view.contact.ContactForm', {
extend : 'Ext.form.Panel',
alias : 'widget.contactform',
name : 'contactform',
frame : true,
title : 'XML Form',
items : [ {
xtype : 'fieldset',
title : 'Contact Information',
defaultType : 'displayfield',
defaults : {
width : 280
},
items : [ {
label : 'First',
xtype : 'hyperLink',
itemId : 'CData',
id : 'CData',
value : 'test'
} ]
} ]
});
Controller File :
Ext.define('ExtMVC.controller.Contacts', {
extend : 'Ext.app.Controller',
views : [ 'contact.ContactForm', 'contact.hyperLink' ],
init : function() {
this.control({
'[itemId=CData]' : {
afterrender : function(cmp) {
// debugger;
// cmp.down('[itemId=CData]').update('testst');
//Ext.get('CData-btnEl').update('new value');
//alert('rerer');
//$('#CData-btnEl').text('20/10/2013');
// console.log("tsrrtya::" +
// cmp.down('[itemId=CData]').update('New label'));
},
click : function(cmp) {
alert("test");
// debugger;
// cmp.down('[itemId=CData]').update('testst');
//Ext.get('CData-btnEl').update('new value');
//cmp.down('[itemId=CData]').setValue('NValue');
// console.log("tsrrtya::" +
// cmp.down('[itemId=CData]').update('New label'));
}
}
});
}
});
Dynamic HyperLink File
Ext.define('ExtMVC.view.contact.hyperLink', {
extend : 'Ext.Component',
alias : 'hyperLink',
xtype : "hyperLink",
itemId : "hyperLink",
autoEl : 'a',
renderTpl : '{label} {value}',
config : {
text : '',
value : '',
label : '',
handler : function() {
}
},
initComponent : function() {
var me = this;
me.callParent(arguments);
this.renderData = {
text : this.getText(),
value : this.getValue(),
label : this.getLabel()
};
},
onRender : function(ct, position) {
var me = this, btn;
me.addChildEls('btnEl');
me.callParent(arguments);
btn = me.btnEl;
me.on('afterrender', function () { });
me.mon(btn, 'click', me.onClick, me);
},
onClick : function(e) {
var me = this;
if (me.preventDefault || (me.disabled && me.getHref()) && e) {
e.preventDefault();
}
if (e.button !== 0) {
return;
}
if (!me.disabled) {
me.fireHandler(e);
}
},
fireHandler : function(e) {
var me = this, handler = me.handler;
me.fireEvent('click', me, e);
if (handler) {
handler.call(me.scope || me, me, e);
}
}
});

var linkTransValues = {
xtype: 'box',
id : 'testId',
hidden : true,
autoEl: {tag: 'a', id : 'testId',, href: 'javascript:addCategoryValue()', html: 'Add Transition Category'}
};
Ext.get('testId').dom.href="your URL or function";

How to add itemtap

I have a list and I cant get items in the list to be clickable. I have onItemDisclosure and that should work but it is not. I would like the whole row to be clickable but I cant seem to get anything to work.
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
Here is my full source code
Ext.ns("Course", "Course.stores");
Course = new Ext.Application({
defaultTarget : 'viewport',
name : 'Course',
launch : function() {
console.log('begin');
this.viewport = new Ext.Panel({
fullscreen : true,
dockedItems : [ {
title : 'Course Catalog',
xtype : 'toolbar',
ui : 'light',
dock : 'top'
} ],
layout : 'fit',
scroll : 'vertical',
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
singleSelect : true,
itemSelector : 'span.id',
onItemDisclosure : function(record, btn, index) {
//window.location = 'http://www.google.com';
}
} ],
flex : 1
});
}
});
Ext.regModel('Properties', {
fields : [ {
name : 'letter',
type : 'string'
}, {
name : 'course',
type : 'string'
} ]
});
Course.stores.Properties = new Ext.data.Store({
model : 'Properties',
sorters: 'letter',
getGroupString : function(record) {
return record.get('letter')[0];
},
proxy : {
type : 'ajax',
url : '../lib/course_catalog.php',
reader : {
type : 'json',
}
},
autoLoad : true
});

Try something like this:
items : [ {
xtype : 'list',
itemTpl : '<span id="{letter}">{course}</span>',
store : Course.stores.Properties,
listeners: {
scope : this,
itemtap : function(foo, bar, etc) {
doSomething...
}
} ],

The reason that taps are not being handled is because you are overriding the itemSelector config:
itemSelector : 'span.id',
You should not do this, as Ext.List expects it to be a certain internally-set value in order to handle events on items properly. Simply removing this from your config should make it start working.