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()
Related
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'
});
}
});
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.
This question is pretty downright dumb and I might have stumbled upon a bug but I need to center my searchfield in my navigation bar in Sencha Touch and I just can't make it work. This is my code:
Ext.define('Myapp.view.MyNav', {
extend: 'Ext.navigation.View',
xtype: 'mynav',
requires: [
'Ext.field.Search', 'Ext.Button'
],
config: {
fullscreen: true,
navigationBar: {
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
align: 'right'
}
]
},
items: [
{
title: 'MyNav',
xtype: 'list',
fullscreen: true,
grouped: true,
store: {
fields: ['name', 'html'],
sorters: 'name',
data: [
{name: 'Alfa', html: '<p>alfa</p>'},
{name: 'Beta', html: '<p>beta</p>'},
{name: 'Gamma', html: '<p>gamma</p>'},
{name: 'Mupp', html: '<p>mupp</p>'},
{name: 'Tupp', html: '<p>tupp</p>'}
],
grouper: {
groupFn: function(record) {
return record.get('name')[0];
},
indexBar: true
},
},
listeners: {
select: function(view, record) {
var test = Ext.create('Ext.Panel', { fullscreen: true,
title: record.get('name'),
layout: {
type:'vbox'
},
items: [
{
xtype: 'panel',
html: record.get('html')
}
]
});
var mainnav = Ext.ComponentQuery.query('bookmarksmainnav')[0];
mainnav.setActiveItem(test);
}
},
itemTpl: '{name}'
}
]
}
});
Focus on the actual navigation bar thing, the other stuff is just code pasted (and I modified it somewhat), I'm pretty sure this is a bug though.
Thanks in advance!
you can try using a toolbar docked in the bottom of the page with the search field centered, I don't know why but the navigation bar ignores the centered property.
Something like this:
config: {
fullscreen: true,
navigationBar: {
},
items: [
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
centered: true
}
],
},
{
title: 'MyNav',
xtype: 'list',
If you need the search field on the top of the screen you could try hiding the navigation bar with hidden: true and changing the docked property in the toolbar.
Hope it helps!
A better answer (for me) that just centres whatever you have added to the navigation bar, is:
this.getNavigationBar().leftBox.setCentered(true);
You will probably want to manage the centred-ness of the navigation bar for each page, though.
I used
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
This would be just under the docked: 'bottom', line is the example above.
Regards
Jacko
Whenever I find it difficult to center a desired field, I just add a spacer before and after, combined with a flex for the item I want to center, it never fails. In this case:
items: [
{
xtype: 'spacer',
},
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
flex: 0.7
},
{
xtype: 'spacer',
},
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'
}
}
})