i have a sencha touch application that uses a tabpanel, a beta version of this application loads all items of the tabpanel and displays it.
with so many items, switching between tabs became slower
for optimization my idea is to load items only when a certain panel is activated after showing a loading mask.
i was able to make it work on first click but when i switch to the same tab another time it's not being filled or at least items are not being showed.
no exceptions are thrown.
Ext.application({
name : 'Sencha',
launch : function() {
var root = contents;
var children = root._listOfContentChild;
var mainPanel = Ext.create('components.NavigationPanel',
{
iconCls : 'more',
listeners: {
activate: function() {
mainPanel .setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
setTimeout(function() {
loadItems(root,children); // returns my items
mainPanel .setItems(items);
mainPanel .setMasked(false);
}, 300);
} } });
var settingsPanel = Ext.create('components.NavigationPanel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
overview:
my application is working correctly if all items are filled at the beginning before pressing on tabs
my problem is when i have a huge number of items and i press on their corresponding tab. it hangs for 1,2 secs.
a person using this application will think that he didn't press correctly on the tab and it will look so slow.
my approach is to load a mask on tab press just for 1 sec, this will make my tab respond automatically when pressed, then i add my items. this idea worked only for the first click, when i switch to another tab and back to the original nothing is being showed (except for the loading mask)
i tried mainPanel.add instead of mainPanel.setItems. i faced another problem, now in the next tap on the panel,my items are shown but without the loading mask as if i'm loading the items at the beginning before pressing.
I figured out the solution. Check the below code.
Hope that helps you!
Code :
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Sencha',
launch: function() {
//var root = contents;
//var children = root._listOfContentChild;
var mainPanel = Ext.create('Ext.Panel', {
iconCls : 'more',
id:'mpanel',
styleHtmlContent:true,
listeners: {
painted: function() {
mainPanel.removeAll();
mainPanel.add({
masked:{
xtype:'loadmask',
id:'lmask',
}
});
setTimeout(function() {
Ext.getCmp('lmask').hide();
Ext.getCmp('mpanel').add({ xtype:'textfield',label:'Name',required:true });
}, 300);
}
}
});
var settingsPanel = Ext.create('Ext.Panel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
Sample output :
Related
I would like to loop through items of a TabPanel without the Tabs (which are not defined in the class, but are added by the framework dynamically).
here is the relevant code :
Ext.define('MyTabPanel', {
extend: 'Ext.tab.Panel',
config:{
height: '50px',
autoDestroy : true,
items: [
{
xtype: 'item',
},{
xtype: 'item',
}
]
}
});
When I loop through the items with the each function, it also loops through the tabs :
ext-item-1
ext-tabbar-1
ext-item-2
ext-item-3
ext-tabbar-2
ext-item-4
Is there a function to omit these hidden sneaky tabs ?
Thanks !
Try using the getInnerItems method to receive only items which are not docked to the tabpanel or floating.
var items = tabPanel.getInnerItems();
Also see this fiddle
I'm new in ExtJS
I need load new panel every time when I click on item in tree.Panel
Here is my code creating new panel (by default)
var contentPanel = Ext.create('Ext.panel.Panel', {
id: 'content-panel',
region: 'center',
layout: 'card',
activeItem: 0,
border: false,
items: [dict_modules['profiles-area']]
});
This code for creating tree.Panel
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
store: store,
height: '100%',
rootVisible: false
});
this is my click handler for tree.Panel
treePanel.getSelectionModel().on('select', function(selModel, record){
if (record.get('leaf')) {
contentPanel.removeAll(true);
contentPanel.add([dict_modules[record.data.id + '-area']]);
contentPanel.doLayout();
}
});
When my app is loaded, it looks like this
Once I click on the "specialty" it looks like this (all right(!!!))
BUT(!!!), once I click on "Profiles", it looks like this (WHY????)
On top of "content-panel" you can see some line
And if I again click on "Specialty", it looks like this (WHY???)
There are no lines at the top! Why??? What I'm do incorrect?
This code solved problem
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-area');
}
});
I am working on a sencha touch mobile app, and I ham having a problem. I will try to include as much details as possible.
I have a TabPanel containing 2 items: home view and contact view.
Ext.define('myapp.view.Main', {
extend: 'Ext.TabPanel',
requires: [
'myapp.view.Home',
'myapp.view.Contacts'
],
config: {
fullscreen : true,
tabBar: {
docked: 'bottom',
defaults: {
flex: 1
},
layout: {
pack: 'center'
}
},
layout: {
type: 'card',
animation: {
type: 'slide'
}
},
items: [
{ xtype: 'homeView' },
{ xtype: 'contactsView' }
]
}
});
I want to have the same navigation view for each item. The navigation view has a button that push another view.
For that I have created a BaseNavigationView.js
Ext.define('myapp.view.BaseNavigationView', {
extend : 'Ext.navigation.View',
xtype : 'baseNavigationView',
config : {
navigationBar : {
items : [ {
xtype : 'button',
text : 'My Info',
align : 'right',
id : 'myInfoButton',
ui : 'small'
}
]
},
}
});
And in the 2 views (Home and Contacts) I use
extend: 'myApp.view.BaseNavigationView'
In order to have the navigation view for both.
Until now everything is working fine.
Now for the controller, I want to add a tap event on the MyInfo button and push the myInfoView when tapped in the corresponding view.
In the controller I added to the Control section:
'#myInfoButton' : {
tap : 'onMyInfoButton'
}
and the handler:
onMyInfoButton: function(self, e, eOpts) {
//Create a new instance of the
if (!this.myInfoView) {
this.myInfoView= Ext.create('myApp.view.myInfoView');
}
//Get the parent navigation view and push the view
self.up('baseNavigationView').push(this.myInfoView);
}
When I run the application, Both the Home and Contact View are correctly showing the navigation view with the 'myInfoButton'.
The problem
When I click on the myInfoButton from the "Home" view, the "myInfoView" is pushed correctly with the back button.
However if I switch to the "Contacts" Tab and click on the myInfoButton , The "myInfoView" is pushed is Pushed in the "Home" tab and not the "Contacts" tab. so in the contacts tab nothing happens and I have to go back to the Home tab to see the pushed view.
So it is like self.up('baseNavigationView') is always referencing the navigation view of the Home and not the contact even when the button in the contact view is clicked.
How can I solve this issue?
Thanks a lot for any help.
I'm going to ask another newbie question. I have come across multiple ways for a child to reference functions and data defined at the parent class level, but I'm not sure what is the recommended way. Below is an example that I am dealing with, but this topic is generally important for me since I do not have a good understanding of reference and scope of parents and children. How can I reference functions and data of a parent from a child of a child element?
As usual, any help will be highly appreciated.
Mohammad
San Jose, CA
/******
This is a floating panel with a formpanel inside it, that has an email field and a button to process the email.
When the button is tapped, I want to call the processEmails() function from the button.
******/
Ext.define('myapp.view.ForwardPanel', {
extend : 'Ext.Panel',
xtype : 'forwardPanel',
initialize: function() {
this.callParent(arguments);
var btn = {
xtype: 'button',
ui: 'action',
text: 'Send',
listeners: {
tap: function(){
processEmails(); //<- **How can I reference and call this function?**
// This function is defined at the parent class level
// (indicated at the bottom of the code listing)
}}
};
var form = {
items: [{
xtype: 'fieldset',
instructions: 'Enter multiple emails separated by commas',
title: 'Forward this message.',
items: [ {
xtype: 'emailfield',
name: 'email',
label: 'Email(s)'
},btn] // The button is added to the form here
}]
};
this.add(form);
},
// this is the parent level function I want to call upon button tap.
processEmails: function(){
console.log('Processing email...');
}
});
I'm not sure about a "right" way to do it, but this is what I would do, and what I see most of the time in the Sencha forum and in their own code:
Ext.define('myapp.view.ForwardPanel', {
...
initialize: function() {
this.callParent(arguments);
var me = this; // <---- reference to the "ForwardPanel" instance
var btn = {
xtype: 'button',
ui: 'action',
text: 'Send',
listeners: {
tap: function(){
me.processEmails(); // <-- notice the "me" in front
}
}
};
...
},
// this is the parent level function I want to call upon button tap.
processEmails: function(){
console.log('Processing email...');
}
});
You can make use of prototype to achieve it:
myapp.view.MyView.prototype.processEmails.call(this);
Here is a working fiddle: http://www.senchafiddle.com/#MvABI
Hi i have created the following ckeditor plugin to insert a youtube video:
(function() {
CKEDITOR.plugins.add('youtube', {
requires : ['iframedialog'],
init : function(editor) {
var iframeWindow = null;
CKEDITOR.dialog.add('youtube_dialog', function() {
return {
title : 'YouTube Movie Properties',
minWidth : 550,
minHeight : 200,
contents : [{
id : 'iframe',
label : 'Insert YouTube Movie',
expand : true,
elements : [{
type : 'iframe',
src : me.path + 'dialogs/youtube.html',
width : '100%',
height : '100%',
onContentLoad : function() {
iframeWindow = document.getElementById(this._.frameId).contentWindow;
}
}]
}],
onOk : function() {
this._.editor.insertHtml('<cke:youtube url="' + iframeWindow.document.getElementById('url').value + '">YouTube Video Place Marker</cke:youtube>');
}
};
});
editor.addCommand('youtube', new CKEDITOR.dialogCommand('youtube_dialog'));
editor.ui.addButton('YouTube', {
label : 'Insert YouTube Movie',
command : 'youtube',
icon : this.path + 'images/icon.gif'
});
}
});
})();
This was working fine but i recently moved my ckeditor files to a CDN. Now when i click the "OK" button i get a permission error. I was looking at the source of the existing plugins to get an idea of how they work but whatever i have tried doesn't seem to work. To get something basic working I tried changing my okOk event to:
onOk : function() {
var hr = new CKEDITOR.dom.element('hr', editor.document );
editor.insertElement(hr);
}
But this gave me a null reference exception.
I'd really appreciate it if someone could show me what i am doing wrong. Thanks
Problem fixed! The solution is to change:
CKEDITOR.dialog.add('youtube_dialog', function()
to:
CKEDITOR.dialog.add('youtube_dialog', function(editor)
and change:
this._.editor
to:
editor
Hope this helps.