Extjs 4.2.3 Add/Remove Container - javascript

im faceing a weird issue here,
i have a viewport - borderlayout,
my west region extends tab.panel, in the first run i have components added to the west region as tabs,
one container has a gridpanel in it, removing this container from the west region and adding it back work perfectly BUT, the grid inside it is not functional anymore, i cant select and click,listeners are not working
here is how im adding panels
thisControl.add({
title: title,
xtype: widgetName,
//items:[{xtype: widgetName}],
closable: true,
//autoScroll: true,
listeners: {
'beforeclose': function(pnl, eOpts) {
if (pnl.closeMe) {
pnl.closeMe = false;
return true;
}
Ext.Msg.show({
title: 'Close confirmation',
msg: 'Really close? <br />It will delete all related Information/Windows and Map Results',
icon: Ext.Msg.QUESTION,
buttons: Ext.Msg.YESNO,
animateTarget: this,
callback: function(btn) {
if ('yes' === btn) {
pnl.closeMe = true;
//console.log('closing..' + widgetName);
_this.ClosePanelSetup(pnl.xtype)
_this.getPnlWestPanel().remove(pnl, true);
WSAVL.app.getController('WSAVL.controller.Main.WestPanel.FunctionsGridPanelWindow').DeSelectRow(pnl.xtype);
}
}
});
return false;
},
close: function(panel, eOpts) {
console.log('Closing..');
}
}
});
and im removing the panels like that
_this.getPnlWestPanel().remove(pnl,true);
pnl.removeAll(false);
after re-adding the removed container, the gird's selection is never clear as if it is still loading the old one, and all listeners are not working and i cant select rows
thank you for any help/suggestions

Related

sencha touch hide and show a component on tab of a button

I have created an app with some views and also there is a list button on the top left corner to display and hide list on tap event.
some how I am able to hide it on tab but don't know how to display it again. By default it should be hidden but on tap of that button it should hide and show it self depending on current property.
iconCls: 'list',
iconMask: true,
ui: 'plain',
handler: function() {
Ext.getCmp('ext-ListNavigation-1').hide();
}
And list view code
Ext.define('ov_app.store.NavigationItems', {
extend: 'Ext.data.Store',
config:{
model: 'ov_app.model.Items',
data:[
{ items:"Services"},
{ items:"Solutions"},
{ items:"About Us"},
{ items:"Why Singapore"},
{ items:"Contact Us"}
]
}
});
the user inter phase looks something like this
As you can see i what to hide and show this (services,solution, etc.. )
on tap of the list button above the list.
var list = Ext.getCmp('ext-ListNavigation-1');
if (list.isHidden()) {
list.show();
}
else {
list.hide();
}

Sencha Touch 2: How to override back button on Navigation View

I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work http://www.senchafiddle.com/#8zaXf
var view = Ext.Viewport.add({
xtype: 'navigationview',
onBackButtonTap: function () {
alert('Back Button Pressed');
},
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
//when someone taps this button, it will push another view into stack
view.push({
//this one also has a title
title: 'Second View',
padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//and when you press this button, it will pop the current view (this) out of the stack
view.pop();
}
}
]
});
The fiddle you've mentioned works well in my local project on my machine. For some reason, it doesn't work on fiddle site. Try running it on your local project.
Still instead of using onBackButtonTap config, it's good to extend Ext.navigation.View class and override onBackButtonTap method. That way you'll have more control over whole components. You'd also like to override other configs as well. Here's what I'd use -
Ext.namespace('Ext.ux.so');
Ext.define('Ext.ux.so.CustomNav',{
extend:'Ext.navigation.View',
xtype:'customnav',
config:{
},
onBackButtonTap:function(){
this.callParent(arguments);
alert('back button pressed');
}
});
the line this.callParent(arguments) will allow component to behave in default way + the way to wanted it to behave. And if you want to completely override the back button behavior you can remove this line. Try doing both ways.
To use this custom component, you can use -
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var view = Ext.create('Ext.ux.so.CustomNav', {
fullscreen: true,
items: [{
title: 'First',
items: [{
xtype: 'button',
text: 'Push a new view!',
handler: function() {
//use the push() method to push another view. It works much like
//add() or setActiveItem(). it accepts a view instance, or you can give it
//a view config.
view.push({
title: 'Second',
html: 'Second view!'
});
}
}]
}]
});
}
Give this a shot. It'll work for you yoo.

How to show and hide paging toolbar using sencha touch?

I have small requirement i.e. PDFViewer in sencha touch, default paging toolbar is hidden.Once we click on pdf document the paging toolbar is showned, remaining time it is hidden.Here my problem is paging toolbar is not showned and hidden.
I tried the following code.Can you please suggest me.
Here is my code
samplePdf = {
xtype : 'pdfpanel',
id: 'pdfViewer', src :'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
scrollable: true,
hidePagingtoolbar: false,
listeners: {
tap: {
fn: function() {
paging = Ext.getCmp('pdfViewer');
if(samplePdf.hidePagingtoolbar==false){
hidePagingtoolbar:true
//Ext.getCmp('pdfViewer').hidePagingtoolbar.hide();
}
else{
hidePagingtoolbar: true;
}
},
element: 'element'},}};
Thanks,
Rajasekhar.
I suggest using the "getter/setter" of the "HidePagingtoolbar" object e.g.
listeners: {
tap: {
fn: function() {
paging = Ext.getCmp('pdfViewer');
paging.setHidePagingtoolbar(!paging.getHidePagingtoolbar());
}
}
}
That should toggle the HidePaggingToolbar flag.

how to load mask while the grid is double clicked to wait for the detail window

forum member I am having one problem while using the loadMask property of the extjs 4.0.2a. Actually I am having one grid which on click open the window with detail information.
As my detail window takes more time to come on screen, so I just decided to make use of the loadMask property of Extjs. But don't know why the loading message is not shown when I double click the grid row and after some time the detail window is shown on the screen.
on grid double click I am executing the below code
projectEditTask: function(grid,cell,row,col,e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading.."});
myMask.show();
var win = this.getProjectGanttwindow();
win.on('show', myMask.hide, myMask);
}
but don't know the loading is not displayed and after waiting for some moment my window is shown correctly.
I just want when I double click the grid Loading message should be displayed and after when the window is load completely Loading message should be dissapear and detail window should be viewed.
when I made the changes as per you said the loading message is displayed but my window is not opened yet. below is the code of window I am trying to open
my projectGanttwindow is
Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window
listeners: {
hide: function() {
alert('hide');
//var store = Ext.data.StoreManager.lookup('taskStore').destroyStore();
//Ext.destroy(store);
//store.destroyStore();
console.log('Done destroying');
}
},
initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];
me.callParent(arguments);
me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});
}
}
});
Try this
function loadMask(el,flag,msg){
var Mask = new Ext.LoadMask(Ext.get(el), {msg:msg});
if(flag)
Mask.show();
else
Mask.hide();
}
When u click on grid call this function
//Enable mask message
loadMask(Ext.getBody(),'1','Please wait...');
After pop loaded call
//Disable mask Message
loadMask(Ext.getBody(),'','Please wait...');

ExtJS mask a TreePanel without toolbar

Im trying to mask a tree panel without the toolbar so that the user can keep typing as the panel is masked. This seems to be harder than I thought so some suggestions would be great!
Although its prob not necessary, Here is my (stripped down) base tree panel:
Ext.tree.TreePanel({
id:'quicksearch_panel',
root:{
nodeType:'async',
preloadChildren:false
},
loader: new Ext.tree.TreeLoader({
dataUrl:'...',
baseParams:{}
}),
tbar:['Quicksearch:', {
xtype:'textfield',
id:'quicksearch_combo',
emptyText: 'search...',
listeners:{
keyup:{buffer:400, fn:function(field, e) {
// Mask Panel and not Combo HERE
}}
}
}]
});
I think you can try to mask the body of the TreePanel? The Element body is an element in all components that inherits Panel, and the Toolbar is in fact out of this body element so you probably could just mask the body, your toolbar will be out of the masking overlay.
Try this:
var tree = Ext.tree.TreePanel({
//......
tbar: ['Quicksearch:', {
xtype:'textfield',
emptyText: 'search...',
enableKeyEvents: true, //you need this for key events
listeners:{
keyup:{
buffer:400,
fn:function(field, e) {
tree.body.mask();
//When the searching done, unmask it
//tree.body.unmask();
}
}
}
}]
});
Do update us if it works :)

Categories