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";
Related
I have Ext Form :
Ext.define('Count.view.AddJListForm', {
extend : 'Ext.form.Panel',
controller : 'List',
xtype : 'add-list',
name : 'addListForm',
cls : 'addFormToolbar',
width : '100%',
height : '100%',
layout : 'hbox',
fullscreen : true,
scrollable : true,
items :
[
{
xtype : 'titlebar',
title : 'Add New Name',
docked : 'top',
},
{
xtype : 'formpanel',
fullscreen : true,
items :
[
{
xtype : 'hiddenfield',
name : 'id'
},
{
xtype : 'textfield',
name : 'ListName',
maxLength : 100,
label : 'List name',
labelAlign : 'top',
required : true
},
{
xtype : 'numberfield',
name : 'Count',
maxLength : 10,
label : 'Count',
labelAlign : 'top',
required : true
},
]
},
{
xtype : 'toolbar',
ui : 'plain',
docked : 'bottom',
items :
[
{
xtype : 'spacer'
},
{
xtype : 'button',
text : 'CANCEL',
name : 'closeAddListFormView',
},
{
xtype : 'button',
text : 'SAVE',
name : 'formSave',
}
]
}
]
});
Controller function :
In this function to get the form values and stored into Database:
Ext.define('Count.view.ListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.JapaList',
control: {
'button[name=formSave]': {
tap : 'saveListData'
}
}
// File save function
saveListData : function(button, record)
{
var form = button.up('formpanel');
var values = form.getValues();
var BgImage = '';
var audioFile = '';
if(form.validate())
{
var ListName = values.ListName;
var Count = values.Count;
callBackSaveData var table = JapaCount.Db.tblJapaList;
toDbArray['ListName'] = ListName;
toDbArray['Count'] = Count;
Count.Db.dbInsertWithCallback(table,toDbArray, me.loadStore, me);
}
data stored on DB. But I need to validate ListName must be unique like a username. if there are any rerecords like the same name it should show an error. In this function were to check that validator or function? anyone have an idea please share
You can find record with ListName using method findRecord on instance of store.
let record = store.findRecord('ListName', ListName, 0, false, false, true);
if (!record) {
//do smth here if ListName not found
}
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();
},
I have a toolbar named DasboardToolbar in which i have a splitbutton.
The problem when I click a menuitem in the splitbutton it fires a event which the controller's this.control method should catch but it doesn't. The object used for firing event is the object of the component still its responding to the fired event.
Any help appreciated.
The is the controller i'm using
Ext.define('MyApp.controller.MainController',
{
extend : 'Ext.app.Controller',
views : [ 'header.MSHeader', 'dashboard.toolbar.DashboardToolbar',
],
init : function() {
console.log("controller");
this.control({
'MSHeader' : {
tabChanged : this.tabChangeTracker
}
}, {
'dash.DashToolbar' : {
layoutSelected :this.layoutSelectedTracker, //errorstatment
}
});
},
layoutSelectedTracker:function(){
console.log('catched'); // code never reaches here
}
});
The Component
Ext.define('MyApp.view.dashboard.toolbar.DashboardToolbar', {
extend : 'Ext.panel.Panel',
alias : 'widget.dash.DashToolbar',
id : 'dashtoolbar',
initComponent : function() {
var me = this;
this.items = [ {
xtype : 'toolbar',
items : [ {
xtype : 'splitbutton',
width : '55',
text : 'layout',
autoScroll : true,
menu : new Ext.menu.Menu({
id : 'layoutmenu',
items : [
{
xtype : 'button',
text : 'First',
handler : function() {
me.fireEvent("layoutSelected", { //eventFired from here
layouts : 1
});
}
}]
})
} ]
} ],
this.callParent();
}
});
Have you tried using the id of the component?
this.control({
'MSHeader': {
tabChanged: this.tabChangeTracker
},
'#dashtoolbar': {
layoutSelected: this.layoutSelectedTracker
}
});
this.control uses Ext.ComponentQuery, have a look at the documentation there.
I used this code which found on forum without errors in 4.0.2a and now 4.0.7 gives me error f is null so i checked with firebug and found out that
getIframe: function() {
return this.getTargetEl().child('iframe');
},
this.getTargetEl().child('iframe') is return null
so any idea why this happen with 4.0.7?
http://jsfiddle.net/Cu9DZ/
Ext.define('Ext.panel.iframePanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.iframePanel',
src : 'about:blank',
loadingText : 'Loading ...',
loadingConfig : null,
renderTpl: [
'<div class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl><tpl if="frame"> {baseCls}-body-framed</tpl><tpl if="ui"> {baseCls}-body-{ui}</tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'<iframe src="{src}" width="100%" height="100%" frameborder="0"></iframe>',
'</div>'
],
initRenderData: function() {
return Ext.applyIf(this.callParent(), {
bodyStyle: this.initBodyStyles(),
bodyCls: this.initBodyCls(),
src: this.getSource()
});
},
initComponent: function() {
this.callParent(arguments);
this.on('afterrender', this.onAfterRender, this, {});
},
/**
* Gets the iframe element
*/
getIframe: function() {
return this.getTargetEl().child('iframe');
},
getSource: function() {
return this.src;
},
setSource: function(src, loadingText) {
this.src = src;
var f = this.getIframe();
if (loadingText || this.loadingText) {
this.body.mask(loadingText || this.loadingText);
}
f.dom.src = src;
},
resetUrl: function() {
var f = this.getIframe();
f.dom.src = this.src;
},
onAfterRender: function() {
var f = this.getIframe();
f.on('load', this.onIframeLoaded, this, {});
},
onIframeLoaded: function() {
if (this.loadingText) {
this.body.unmask();
}
}
});
var printpanel = Ext.create('Ext.panel.Panel', {
title : 'Print',
width : 800,
height : 300,
renderTo : Ext.getBody(),
bodyPadding : 5,
layout : 'fit',
items: Ext.widget('iframePanel', {
border : false,
src : '',
itemId : 'ds_print_panel'
}),
tbar: ['->',{
text : 'Test',
listeners: {
click: function(){
printpanel.down('#ds_print_panel').setSource("http://www.rockstown.com/node/4");
}
}
}]
});
I've found few bugs here.
As you already know child('iframe') returns null, because in Ext4 it selects a single direct child (in opposite to Ext3). You should use down('iframe') instead
body is undefined in iframePanel, use getTargetEl() instead
printpanel.down('#ds_print_panel') doesn't work neither, you can use eg. this.findParentByType('panel')
Here is working sample: http://jsfiddle.net/Cu9DZ/3/
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.