I have a button in the view:
items: [{
xtype: 'button',
text: 'Click me!',
handler: 'onClick' // <- call function from controller
}]
Now I want to change that button to custom button (contains a text and a link), just like this:
items: [{
xtype: 'component',
html: getLink()
}]
In same js file, I have a function:
function getLink() {
// Doing something
return '<div>Hi, Click me!</div>';
}
I want to call 'onClick' function when I click custom button. How can I do?
Thanks!
Add click event handler in your controller with afterrender:
View:
items: [{
xtype: 'component',
html: getLink(),
itemId: 'myLink'
}]
Controller:
var controller = this;
controller.control({
// Selector for your link parent component
'yourSelector': {
afterrender: function(component) {
component.down('#myLink').on('click', function() {
controller.onClick();
});
}
}
})
You can use element and delegate on your listener, for example:
{
xtype: 'box',
html: '<div>Hi, <a class="custom-btn">Click me!</a></div>',
listeners: {
click: {
element: 'el',
delegate: '.custom-btn',
fn: function() {
console.log('click!');
}
}
}
}
https://fiddle.sencha.com/#fiddle/11mt
xtype: 'component',
autoEl:{
tag: 'a',
href: '',
onClick: 'nameYouFunction'
}
Related
I want the icon on right side of textfield , What i am trying is i wrap the textbox and that wrapper has relative position and then to this wrap i append a div with absolute position and then set the class to it to show the icon. My question is the icon with the absolute position shouldn't it sit within the relative positioned wrapper. I see the wrapper and icon div outside of the textfield table in the HTML tab of firebug after it is rendered. My code with the screen shot is as below.
<style type="text/css">
.icon {
background-image: url("../Content/images/not_documented.png");
cursor: pointer;
height: 16px;
width: 16px;
}
</style>
<script type="text/javascript">
Ext.onReady(function () {
//define a new custom text field
Ext.define('WithStatusTextField', {
extend: 'Ext.form.field.Text',
alias: 'widget.withStatusTextField',
iconCls: 'icon ',
fieldStyle: {
textTransform: "uppercase"
},
initComponent: function () {
this.callParent(arguments);
},
afterRender: function () {
if (this.iconCls) {
var iconCls = this.iconCls;
//delete this.iconCls;
this.setIconCls(iconCls);
}
this.callParent(arguments);
},
renderIconEl: function () {
if (!this.wrap) {
this.wrap = this.el.wrap({ cls: "x-form-field-wrap" });
this.positionEl = this.wrap;
}
this.wrap.applyStyles({ position: "relative" });
this.icon = Ext.DomHelper.append(this.el.up("div.x-form-field-wrap") || this.wrap,
{
tag: "div",
style: "position:absolute"
}, true)
if (!this.width) {
this.wrap.setWidth(this.el.getWidth() + 50);
}
this.icon.on("click", function (e, t) {
this.fireEvent("iconclick", this, e, t);
}, this);
},
setIconCls: function (iconCls) {
if (this.iconCls) {
this.renderIconEl();
}
this.iconCls = iconCls;
this.icon.dom.className = iconCls;
//this.icon.alignTo(this.el, 'tl-tr', [2, 0]);
},
listeners: {
change: function (obj, newValue) {
console.log(newValue);
obj.setRawValue(newValue.toUpperCase());
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
height: 150,
// The fields
defaultType: 'withStatusTextField',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
when i put the debug point in firebug at the point where the class for the div that show the icon is set it shows the icon properly next to the textfield the screenshot of which is but after the complete render the icon sits somewhere else.
Wrap on textfield with icon class afterRender - the visual display of icon after the icon class is set.
Wrap on textfield with icon class - this.wrap.dom.outerHtml
dom Structure - after the complete render the div icon class with field wrap class goes outside the textfield div.
I am new to sencha. I am trying to add an icon to a panel, but my code doesn't work.
Ext.define('components.ImagePanel', {
extend: 'Ext.Panel',
initialize: function () {
this.callParent(arguments);
var image = {
xtype: "image",
src: 'icon.png',
width:100,
height:100
},
scope: this
};
this.add([image]);
});
What I am doing wrong?
Wow, didn't even know that there was an image xtype.
Anyway...
To use an xtype, you need to create it using Ext.widget();
So your code should look something like this:
Ext.define('components.ImagePanel', {
extend: 'Ext.Panel',
initialize: function () {
this.callParent(arguments);
var image = Ext.widget('image',{
xtype: "image",
src: 'icon.png',
width:100,
height:100
});
this.add([image]);
};
});
I use JSON to load Full Calendar and include a description for each event in a custom parameter. I want to use jQuery dialog box on eventClick function but don't know how to specify it. Here is what I'm trying to do:
eventClick: function(calEvent, jsEvent, view) {
$("#cal_event").dialog({
title: calEvent.title,
content: calEvent.description
});
}
Is there an Object to use where I have indicated "content"? If not, how do I get the calEvent.description into the dialog box?
Thanks for any help you can offer.
Thought I'd post how I ended up doing this to help others reading this post.
I used the following:
$(document).ready(function() {
$('#calendar').fullCalendar({
theme: "true",
aspectRatio: 1.8,
weekMode: 'liquid',
header: {
left: "",
center: "prev title next",
right: ""
},
buttonIcons:{
prev: "triangle-1-w",
next: "triangle-1-e"
},
eventSources: [
{
url: 'file1.php', // Event Source One //
type: 'POST',
error: function() {
alert('there was an error while fetching events!');
},
color: '#006600',
textColor: 'white'
},
{
url: 'file2.php', // Event Source Two //
type: 'POST',
error: function() {
alert('there was an error while fetching events!');
},
borderColor: '#006600',
color: 'white',
textColor: '#333333'
}
],
eventClick: function(calEvent, jsEvent, view) {
$("#dialog_frame").css("visibility", "visible");
$("#dialog_frame").draggable("enable");
$(".dialog_content").html(calEvent.description);
$(".dialog_title").html(calEvent.title);
}
})
});
I have multiple buttons loading up in the button toolbar I need those buttons to go to different links. However, I have not been able to figure it out. Below is what I tried to do but it does not work.
//Below are three buttons that need to go to three different links
var buttonsGroup1 = new Ext.Button({
text: 'MESSAGES',
handler: tapHandler
});
var buttonsGroup2 = new Ext.Button({
text: 'HOLDS',
handler: tap2Handler
});
var buttonsGroup3 = new Ext.Button({
text: 'FINANCIALS',
handler: tapHandler
});
//Click on the button and it goes to these links
var tapHandler = function (btn, evt) {
window.location = 'index.html';
};
var tap2Handler = function (btn, evt) {
window.location = 'redirect.php';
};
//Combine all the variables above and some other stuff and then add it to docked items very object oriented =)
var dockedItems = [
{
xtype: 'toolbar',
title: 'Student Portal',
ui: 'light',
dock: 'top',
items: buttonsSpecTop,
defaults: { handler: tapHandler }
},
{
xtype: 'toolbar',
ui: 'dark',
items: [buttonsGroup1, buttonsGroup2, buttonsGroup3], //This is where I load up all the buttons
dock: 'bottom',
layout:{
pack: 'center'
},
defaults: [handler: tapHandler, handler: tap2Handler] //This is the handler for the links
}];
For each button config, add one extra config param say actionUrl this way:
{
xtype: 'toolbar',
actionUrl : 'http://www.google.com',
title: 'Student Portal',
ui: 'light',
dock: 'top',
items: buttonsSpecTop,
defaults: { handler: tapHandler }
}
Now, for tapHandler function, the first parameter is the button instance. So, you can get the url this way:
function tapHandler(btn){
console.log(btn);
window.open(btn.actionUrl);
}
And you cannot put things in javascript this way inside an array:
defaults: [handler: tapHandler, handler: tap2Handler]
You have to use an object for that, similar to the first one:
defaults: { handler: tapHandler }
And, you cannot put multiple parameter of same name within a single object, only one "handler" will go there. And for defaults, only one handler will be applied to all the items. So, if you want individual handlers for individual buttons, use handler listener to each of the button.
I'm having trouble in validating a jQuery UI dialog using Jquery Validate upon clicking Save.
Here's my code to create Jquery dialog. It loads the dialog from a target a href URL:
$(document).ready(dialogForms);
function dialogForms() {
$('a.dialog-form').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.find('#return').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 'auto'
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
beforeSend: function(data) {
//alert("beforesend");
form.validate();
},
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'text',
error: function(data) {
alert(data);
$('#result').html(data);
},
success: function(data) {
//alert("success");
$('#result').html(data);
setTimeout("reloadPage()", 500);
}
});
return false;
}
The beforeSend is called, but it doesn't seem to call the validate method, which is located on the parent page from which Dialog is called.
$(document).ready(function() {
$("#event_form").validate({
rules: {
Name: {
required: true
},
Category: {
required: true
}
},
messages: {
Name: "Please enter an event name",
Category: "Please choose a category"
},
submitHandler: function(form) {
alert("validated");
// $('#loading_1').show();
// $('#proceed_c').hide();
// $(form).ajaxSubmit();
// //form.submit();
},
errorPlacement: function(error, element) {
error.appendTo(element.next(".status"));
}
});
}
Is the problem with the beforeSend within submitFormWithAjax function, the location of $("#event_form").validate or the submitHandler: function(form) within it? Any help will be greatly appreciated.
When you initialize the jQueryUI dialog, it modifies the DOM, the whole dialog is taken out of it's location in the page and inserted right before the </body> tag. You can see this with Firebug. This causes a problem for Validate, because now the form is empty. To solve this, on the dialog's open event, append it to the form. It sounds really wacky, but trust me, it works :)
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {submitFormWithAjax($(this).find('form'));},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
open: function(){
$(this).parent().appendTo($('#event_form'));
},
width: 'auto'
});
Edit:
<form id='event_form'>
<div id="dialog" title="DialogTitle">
</div>
</form>
Took a slightly different approach to this. I needed to reuse my modal form so I append it once jquery "creates" the modal:
$("#mdl_Subject").dialog({
autoOpen: false,
show: "drop",
hide: "drop",
modal: true,
create: function () {
$(this).parent().appendTo($('#aspnetForm'));
}
});