Have this code
Ext.define('C.YmkDetPanel', {
extend: 'Ext.Panel',
xtype: 'YmkDetPanel',
conttroller: 'ccc',
viewModel: {
type: 'ymkDetModel'
},
bind: {
html: '<div> {zzz} </div> <div id = "button"> </div>'
},
listeners: {
painted: function ( ) {
new Ext.Button({
renderTo: 'button',
scope: this,
text: 'Click Me',
listeners:
{
tap: function() {
alert(this.up());
}
}
});
}
},
initComponent: function() {
this.callParent(arguments);
}
});
I see created button.
But on click this.up() is null. THIS is the button.
How to access to C.YmkDetPanel from button? in Painted event THIS is "Ext.dom.Element"
Use a container and nest the 2 items separately, fiddle:
Ext.define('C.YmkDetPanel', {
extend: 'Ext.Panel',
xtype: 'YmkDetPanel',
viewModel: {
data: {
zzz: 'foo'
}
},
items: [{
xtype: 'component',
bind: '{zzz}'
}, {
xtype: 'button',
text: 'Click me'
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Viewport.add({
xtype: 'YmkDetPanel'
});
}
});
Related
I have the following override in myPackage\overrides\window\Window:
Ext.define('myPackage.window.Window', {
override: 'Ext.window.Window',
listeners: {
beforeshow: function (window) {
console.log('before show');
}
}
});
I then use this with this code:
Ext.define('myApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'myApp.view.login.LoginController',
'Ext.form.Panel'
],
controller: 'login',
title: 'Login',
closable: false,
autoShow: true,
resizable: false,
listeners: {
show: function() {
console.log('in show');
}
},
items: {
... snipped for brevity; a couple of textfields and a button
...
}
});
The problem is that while the 'show' event in 'myApp.view.login.Login' works fine, the 'beforeshow' event in the override ('myPackage.window.Window') never fires.
If I then remove the listeners from 'myApp.view.login.Login', then the 'beforeshow' event in 'myPackage.window.Window' will then fire (I can see all this with the console.log output).
What I don't understand is, why? I am probably missing something fairly simple.
Any help with this is greatly appreciated. Thanks!
you should add the listener after you window is initialized.
I haven't tested it yet. but I am sure it should solve your issue.
eg:
Ext.define('myApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'Ext.form.Panel'
],
title: 'Login',
width: 300,
height: 300,
closable: true,
autoShow: true,
resizable: false,
initComponent: function () {
var me = this;
Ext.apply(me, {
listeners: {
show: function () {
console.log('in show');
}
},
items: [
{
xtype: 'textfield',
width: 300
}
]
});
me.callParent(arguments);
}
});
Hi i'm new to Sencha and i'm try to set json request data to filedset. But it does not work. Please help me i cannot find the error.
this is my json request data:
{"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}}
And this is the code.
Ext.define('AIOS_vis.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
listeners: {
activate: function() {
alert('gr');
Ext.data.JsonP.request({
url: 'http://localhost:8080/mock/GetCtPwer.php',
method: 'POST'
callbackkey: 'callback',
params: {
tap_id: 1
},
scope: this, /// fix handler scope
callback: function (response, value, request) {
var wattComponent = Ext.getCmp('watt');
wattComponent.setValue(value.response.electric_power);
var ampereComponent = Ext.getCmp('ampere');
ampereComponent.setValue(value.response.electric_current);
},
failure: function (response, request) {
Ext.Msg.alert(response);
}
});
}
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Visual',
},
{
xtype: 'fieldset',
instructions: 'Last Update: 2014/02/06:12:45:23',
items: [
{
xtype: 'button',
text : 'current',
height: '40px',
},
{
xtype: 'textfield',
id: 'watt',
label: 'Wattage (W):',
text: '1890.9W'
}, {
xtype: 'textfield',
id: 'ampere',
label: 'Amperage (A):',
text: '18.91A'
}]
},
{
xtype :'titlebar',
style: 'background:#484848',
title : 'power</br>123.4Wh',
height: '100px'
}
]}
]
},
});
Change your webservice url to (for example) http://yoururl.com:8080/mock/GetCtPwer.php?jsonp=parseResponse
and make sure your webserice is responding this:
parseResponse({"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}})
you can change "parseResponse" to whatever you want.
I modified the code like this and I added some items, because I'd like to get a div with scroll, but it does not work in Sencha!
Any suggest?
Thanks in advance!
Code:
/*global Ext:false */
Ext.application({
launch: function () {
Ext.create('Ext.Container', {
fullscreen: true,
styleHtmlContent: true,
data: [{
fname: 'Stratton',
lname: 'Sclavos',
role: 'Executive Chairman'
},
etc. ],
tpl: '<div style="overflow: auto; overflow-y: auto;"><tpl for="."><div><strong>{lname}</strong>, {fname} <em class="muted">({role})</em></div></tpl></div>'
}); // create()
} // launch
}); // application()
Add:
scrollable : {
direction : 'vertical'
},
Like this:
/*global Ext:false */
Ext.application({
launch: function () {
Ext.create('Ext.Container', {
fullscreen: true,
styleHtmlContent: true,
scrollable : {
direction : 'vertical'
},
data: [{
fname: 'Stratton',
lname: 'Sclavos',
role: 'Executive Chairman'
},
etc. ],
tpl: '<div style="overflow: auto; overflow-y: auto;"><tpl for="."><div><strong>{lname}</strong>, {fname} <em class="muted">({role})</em></div></tpl></div>'
}); // create()
} // launch
}); // application()
I've overridden the color of a bar in a bar chart by acting directly on the graphic. It works on initial load, but if I hover over the bar to display the tooltip, when I mouseout, it reverts to the default color, not my custom choice.
How would I edit the settings for that event on just the one bar.
See:
http://jsfiddle.net/WQkeQ/4/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max:4000,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
if(this.y > (this.series.chart.yAxis[0].max))
return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ;
else
return this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
},function(chart){
var max = chart.yAxis[0].max,
content = '<h2>Points</h2><br/>';
$.each(chart.series,function(i,serie){
$.each(serie.data,function(j,data){
if(data.y > max){
content += 'Point: '+data.y+' is bigger than max: '+max;
data.graphic.attr({fill:'silver'});}
});
});
$('#report').html(content);
});
});
});
Hover over silver bar.
Thanks,
Manisha
Manisha, You can use CSS property for elements to set the color for the single bar in the series.
use
data.graphic.css({color: 'silver' });
instead of
data.graphic.attr({fill:'silver'});
Fiddled Version.
Hope this helps.
i have list of items, while click the particular list item it will show the details of that item.. i have problem, for the first item click it shows the correct result but while click the next item i am getting that particular item details but it showing the old item details.this is my code
RadMobApp.views.patPanel = Ext.extend(Ext.Panel, {
id: 'pathView',
layout : 'fit',
initComponent: function() {
this.titleTxtc = new Ext.Component({
cls : 'top_title_text',
html: 'History'
});
this.backButton = new Ext.Button({
text: 'back',
height:15,
ui:'back',
handler: function () {
controller.showPanel();
},
scope: this
});
this.titleBar = new Ext.Toolbar({
dock: 'top',
cls: "top_tool_bar2",
height: 42,
items: [this.backButton, {xtype: 'spacer'}, this.titleTxtc, {xtype: 'spacer'}]
});
var tabs = new Ext.TabPanel({
xtype:"tabpanel",
id: 'tabpanel',
renderTo: Ext.getBody(),
width:400,
height: 150,
activeTab: 0,
layoutOnTabChange: true,
tabBar: {
cls: "top_tab_panel1",
height: 42,
style: 'padding-left:2px;'
},
items: [{
xtype: 'Panel1',
id: 'panel1',
title: 'Panel1',
height: 100
},{
xtype: 'Panel2',
id: 'panel2',
title: 'Panel2',
height: 100
},{
xtype: 'panel3',
id: 'panel3',
title: 'Panel3',
height: 100,
listeners: {
beforeshow: function(p) {
scope: this;
/* var tabPanel = p.ownerCt;
var tabEl = tabPanel.getTabEl(prmPanel);
Ext.fly(tabEl).child('span.x-tab-strip-text',
true).qtip = 'Tab is now enabled';
Ext.getCmp('panel2').enable(); */
}
}
}]
});
this.dockedItems = [this.titleBar];
this.items = [tabs];
RadMobApp.views.patPanel.superclass.initComponent.call(this);
}
});
how to clear the tab panel? Thanks in advance
try putting the config option
remoteFilter : true
to your store from which you are loading the data to the list.ie
new Ext.data.Store({
model: 'Test',
sortOnLoad: true,
remoteFilter : true,
autoLoad: true,
getGroupString : function(record) {
return record.get('FullName_FirstLast')[0];
},
proxy: {
type: 'ajax',
url : testUrl,
reader: {
type: 'json',
root: 'test'
}
}
})