I m using the template admin-dashbord from the ext framework 6.2.0.
When i use this, in my AuthenticationController
this.getView().destroy();
only the child view login close.Not the parent.
The app-main component is build behind the parent view.
I don't know how to close the parent view.
I have this following structure :
LoginWindow.js
Ext.define('Admin.view.authentication.LockingWindow', {
extend: 'Ext.window.Window',
xtype: 'lockingwindow',
requires: [
'Admin.view.authentication.AuthenticationController',
'Ext.layout.container.VBox'
],
cls: 'auth-locked-window',
closable: false,
resizable: false,
autoShow: true,
titleAlign: 'center',
maximized: true,
modal: true,
....
});
Login.js
Ext.define('Admin.view.authentication.Login', {
extend: 'Admin.view.authentication.LockingWindow',
xtype: 'login',
requires: [
'Admin.view.authentication.Dialog',
'Ext.container.Container',
'Ext.form.field.Text',
'Ext.form.field.Checkbox',
'Ext.button.Button'
],
title: 'Let\'s Log In',
defaultFocus: 'authdialog', // Focus the Auth Form to force field focus as well
....
{
xtype: 'button',
reference: 'loginButton',
scale: 'large',
ui: 'soft-green',
iconAlign: 'right',
iconCls: 'x-fa fa-angle-right',
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginButton'
}
},
});
AuthenticationController.js
Ext.define('Admin.view.authentication.AuthenticationController', {
extend: 'Ext.app.ViewController',
alias: 'controller.authentication',
onLoginButton: function() {
var me = this;
localStorage.setItem("TutorialLoggedIn", true);
// Remove Login Window
this.getView().destroy();
// Add the main view to the viewport
var main = Ext.create({
xtype: 'app-main'
});
me.redirectTo('dashboard', true);
},
});
Get the view :login
Get the parent :LockingWindow
destroy the parent: LockingWindow
here is my method added to AuthenticationController.js and called in onLoginButton() method.
createInterface : function(){
var me = this,
view = me.getView(),
window = view.up('window');
Ext.create({
xtype: 'app-main'
});
window.destroy();
me.redirectTo('dashboard', true);
}
Related
Why is the first listener not working and the other one working?
How to set the first listener to work?
Maybe the problem is related to scope, this?
How can I set this to see the function available in MainControllers?
It is modern version ExtJS 6.2
Structure folders:
//FeedViewer
//app
//view
//main
/MainController.js
/MainModel.js
/FeedForm.js
/Feeds.js
//classic
//modern
//src
//view
//main
/Main.js
MainController.js:
Ext.define('FeedViewer.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onNewFeed: function () {
alert('Hello');
}
});
Feeds.js:
Ext.define('FeedViewer.view.main.Feeds', {
extend: 'Ext.grid.Grid',
xtype: 'feedslist',
requires: [
'ContactsApp.view.feeds.MainController',
'ContactsApp.view.feeds.MainModel'
],
viewModel: 'feeds',
controller: 'feeds',
columns: [{
dataIndex: 'feed',
text: 'feed'
}],
items: [{
xtype: 'toolbar',
docked: 'left',
items: [{
xtype: 'button'
text: 'Add New Feed',
iconCls: 'fa fa-plus',
listeners: {
click: 'onNewFeed' * * //It doesn't work**
}
}]
}],
listeners: {
select: 'onNewFeed' * * //It works**
}
});
In modern toolkit Ext.Button click event is called tap. Also you can use handler config. Here's the FIDDLE
i m new in sencha . i always use id to define my component . but now i want to change it to itemid . and i found the Ext.getcmp('id'), is not work . and when i use Ext.componentquery.query('itemid') ,the console in chrome said Ext.componentquery is not a function. what can i do?
my view code:
Ext.define('ylp2p.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.carousel.Carousel',
'ylp2p.store.datainterests',
'Ext.Label',
'Ext.List'
],
config: {
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: 'vertical',
items: [
{
title: '首页',
iconCls: 'home',
styleHtmlContent: true,
//true to automatically style the HTML inside the content target of this component (body for panels).
scrollable: true,
layout: 'card',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'ylp2p'
},
{
xtype: 'container',
layout: 'vbox',
items:[
{
xtype: 'label',
itemId: 'datalabel',---------this component is what i want
height: 50,
store: 'datainterests',
tpl: '金额：{data},利息：{earn}',
}//end label
]
}
]//end items
}
]
},//end config
//end listeners
});
my controller code :
Ext.define('ylp2p.controller.viewdata',{
extend: 'Ext.app.Controller',
launch: function(){
console.log('hello ! here is controller launch function');
var storeId = Ext.create('ylp2p.store.datainterests');
storeId.load({
callback: function(records, operation, success){
Ext.each(records, function(record) {
Ext.ComponentQuery.query("main > datalabel").setData({----it cant work . why?
data : record.get('data'),
earn : record.get('earn')
});
});
}
});
}
});
the console error said:
Uncaught TypeError: Ext.ComponentQuery.query(...).setData is not a function
i got it
var label = Ext.ComponentQuery.query('main #datalabel')[0];
label.setData({
data : record.get('data'),
earn : record.get('earn')
});
I found Sencha's own code to use menu.down('#groupMenuItem') to access itemId:'groupMenuItem'. So you should be fine using:
Ext.ComponentQuery.query('#itemid')
Use this.
var label = Ext.ComponentQuery.query('main #datalabel'); -- check on console label should not undefined
label.tpl.updateData -- you will find methods with tpl
When I load my list view it has several blog posts and a refresh button on the top left.
If I tap on a list item a view is pushed with the contents of that specific post. When this view is pushed in, the refresh button is hidden.
But when I tap 'Back' to the parent list view, I'd like the refresh button to show (un-hide) - but it remains hidden.
Any idea how to make this work?
This is my View:
Ext.require(['Ext.data.Store', 'MyApp.model.StreamModel'], function() {
Ext.define('MyApp.view.HomeView', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
requires: [
'Ext.dataview.List',
],
config: {
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
navigationBar: {
items: [
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
align: 'left',
action: 'refreshButton',
id: 'refreshButtonId'
}
]
},
items: {
title: 'My',
xtype: 'list',
itemTpl: [
'<div class="post">',
...
'</div>'
].join(''),
store: new Ext.data.Store({
model: 'MyApp.model.StreamModel',
autoLoad: true,
storeId: 'stream'
}),
}
}
});
});
and my Controller:
Ext.define('MyApp.controller.SingleController', {
extend: 'Ext.app.Controller',
config: {
refs: {
stream: 'homepanel'
},
control: {
'homepanel list': {
itemtap: 'showPost'
}
}
},
showPost: function(list, index, element, record) {
this.getStream().push({
xtype: 'panel',
html: [
'<div class="post">',
'</div>'
].join(''),
scrollable: 'vertical',
styleHtmlContent: true,
});
Ext.getCmp('refreshButtonId').hide();
}
});
I'm not sure whether this is the best approach or not but if I were you I will use the back event of navigation view which fired when you tap the back button
So beside showPost function, you should add another control for back event like this:
'homepanel list': {
itemtap: 'showPost'
},
stream: {
back: 'backButtonHandler'
}
Then you can run the backButtonHandler function to show your refresh button again:
backButtonHandler: function(button){
Ext.getCmp('refreshButtonId').show();
}
Hope it helps :)
i am using sencha touch 2 to build an app.
i Have the following view:
Ext.define("DRT.view.Pbox", {
extend: 'Ext.form.Panel',
xtype: 'pboxcard',
config: {
floating: true,
centered: true,
modal: true,
height: 200,
wifth: 300,
styleHtmlContent: true,
html: 'Hi this is a popup',
items: [
{
xtype: 'button',
action: 'hide',
ui: 'confirm',
docked: 'bottom'
}
]
}
});
in my controller i have the follow ref:
config: {
refs: {
home: 'homecard',
pbox: 'pboxcard',
}
}
and i have one the following function:
showError: function(){
var popup = this.getPbox();
console.log(popup);
Ext.Viewport.add(popup);
popup.show();
}
but for some reason popup is undefined. and i cant seem to find out what the problem is
sorry guys i figured it out ... posted it a little too soon i guess. had to do this instead
pbox: {
selector: 'formpanel pboxcard',
xtype: 'pboxcard',
autoCreate: true
},
I am working with the Sencha touch framework and there list item component. I have only been working with this for about 2 weeks now and I can not figure out how to get the "onItemDisclosure" to open up the "detailPanel". I am trying to follow this example: http://vimeo.com/19245335. I have pasted my code below. Any help is very much appreciated.
GoW3Guide.views.detailPanel = Ext.extend(Ext.Panel, {
id: 'detailpanel',
tpl: 'Hello, {firstName}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
GoW3Guide.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});
Ext.reg('detailPanel', GoW3Guide.views.detailPanel);
GoW3Guide.views.listPanel = Ext.extend(Ext.List, {
id: 'disclosurelist',
store: GoW3Guide.ListStore,
itemTpl: '<div class="contact">{firstName} {lastName}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
GoW3Guide.views.detailPanel.update(record.data);
GoW3Guide.views.Guidescard.setActiveItem('detailpanel');
}
});
Ext.reg('listPanel', GoW3Guide.views.listPanel);
GoW3Guide.views.Guidescard = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(this, {
items: [GoW3Guide.views.listPanel, GoW3Guide.views.detailPanel]
});
GoW3Guide.views.Guidescard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('guidescard', GoW3Guide.views.Guidescard);
Are you getting any javascript errors?
According to the docs setActiveItem either needs a component instance, a number (card index), or a config object, e.g. {xtype:'detailPanel'}
If you want to make a new detail panel active try
GoW3Guide.views.Guidescard.setActiveItem({xtype:'detailpanel'});
or
GoW3Guide.views.Guidescard.setActiveItem(new GoW3Guide.views.detailPanel());