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]);
};
});
Related
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'
}
I'm trying to create a small application with Google Maps API.
First, I started with a navigation view named MainView; this is the code:
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainView',
requires: [
'Ext.navigation.Bar',
'Ext.Button',
'Ext.Panel',
'Ext.Map'
],
config: {
itemId: 'mynavigationview',
navigationBar: {
.......
layout: {
.....
},
items: [
......
]
},
items: [
{
xtype: 'panel',
title: 'Locations',
itemId: 'mapPanel',
items: [
{
xtype: 'map',
height: '100%',
itemId: 'map'
}
]
}
]
}});
Secand, in the controller mapController I made 3 references and 1 control onMapInitialize to center the map on my position with the the library ext.util.Geolocation. This is the code:
Ext.define('MyApp.controller.mapController', {
extend: 'Ext.app.Controller',
alias: 'controller.mapcontroller',
config: {
refs: {
mapView: {
selector: 'mainView #map',
xtype: 'Ext.Map'
},
mainView: {
selector: 'mainView',
xtype: 'Ext.navigation.View'
},
mapPanel: {
selector: 'mainView #mapPanel',
xtype: 'Ext.Panel'
}
},
control: {
"map#map": {
initialize: 'onMapInitialize'
}
}
},
onMapInitialize: function(component, eOpts) {
var map = this.getMapView();
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: false,
listeners: {
locationupdate: function(geo) {
var currentLat = geo.getLatitude();
var currentLng = geo.getLongitude();
console.log('marking current location...');
var currentLocation = new google.maps.LatLng(currentLat,currentLng);
map.setCenter(currentLocation);
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
map: map,
position: currentLocation,
title: 'My Current Location'
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function() {
infoWindow.setContent('My current position');
infoWindow.open(this.getMap(), marker);
});
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout)
Ext.Msg.alert('Timeout occurred',"Could not get current position");
else
alert('Error occurred.');
}
}
});
geo.updateLocation();
}});
But when I test the application in the navigator, this error in this image has also appeared:
I think that, possibly, the instance var map = this.getMapView(); is not working or that's the wrong reference. Can anyone help?
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 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'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'));
}
});