ExtJS mask a TreePanel without toolbar - javascript

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 :)

Related

Grid loadMask malfunction.Set loadMask target config

The grid loadMask has some problems.
LoadMask:true does not work.
If I choose to do as follows:
viewConfig: {
loadMask: {msg: 'Loading records ...'}
}
It works but the mask only covers the grid body, excluding toolbares.
I tried maskElement: 'el' but did not work.
I do not intend to use setLoading ().
One solution might be target to my grid:
viewConfig: {
loadMask: {msg: 'Loading records ...', target: this}
}
But target: this does not work.
Any idea how to get and set grid reference in the config target?
You would have to override the createMask function of AbstractView.
Ext.define('Test',{
override:'Ext.view.AbstractView',
privates:{
createMask:function(mask) {
if(this.ownerCt) {
if(!Ext.isObject(mask)) mask = {target:this.ownerCt};
else if(!mask.target) mask.target = this.ownerCt;
}
this.callParent(arguments);
}
}
});
Fiddle

Show/hide subpanels dynamically in Ext JS

I have created a view (a panel) with 3 subpanels ...
When the view loads , I want a function to run in viewController and based on its outcome , I want subpanel 1 to be visible(subpanel2 to be invisible) or subpanel2 to be visible(subpanel1 to be invisible)
How can I accomplish this ?
You are looking for card layout. It is already implemented. So you don't have to implement again. Just tell it witch panel gonna be active it will do all layout things itself. Checkout this api doc.
May be the Accordion layout can help you:
This is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time
Here's a full example, it's quite straight forward:
Fiddle
Ext.define('FooController', {
extend: 'Ext.app.ViewController',
alias: 'controller.foo',
init: function(view) {
var child = Math.random() < 0.5 ? 'p1' : 'p2';
view.setActiveItem(this.lookupReference(child));
}
})
Ext.define('Foo', {
extend: 'Ext.container.Container',
layout: 'card',
controller: 'foo',
items: [{
title: 'P1',
reference: 'p1'
}, {
title: 'P2',
reference: 'p2'
}]
});
Ext.onReady(function() {
new Foo({
renderTo: document.body,
width: 200,
height: 200
});
});
Give itemId to all three panel and then fireEvent.
Listener of view
listeners:{
show: function(){
me.fireEvent('showHidePanel');
}
}
define showHidePanel method in Controller and in that method get panel by using down() with item id and hide/show panel by using hide()/show() method.

Extjs 4.2.3 Add/Remove Container

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

kendo ui grid batch editing, set focus

I working on a kendo ui grid. The grid is not-editable as default.
In the toolbar is a 'edit' button. When the user clicks on it, the grid should be editable in batch mode like this.
The only solution to get this work is remove and recreate the grid/datasource with new properties (editable:true etc).
This works as expected. Now I want to set the focus on the first row/cell, so that the user can see that the grid is editable now (in the example below the row becomes an input field).
Any suggestions for this?
Here is a fiddle for this.
$('.k-grid-edit').on('click', function (e) {
e.preventDefault();
// remove old grid
$('#grid').html('');
// recreate grid with edit: true and new datasource
$('#grid').kendoGrid({
dataSource: dataSourceInEdit,
editable: true,
columns: [{
field: 'TableId',
title: 'Id',
width: 50
}, {
field: 'Area',
title: 'Area'
}, {
field: 'Table',
title: 'Table',
width: 60
}, {
command: 'destroy',
title: ' ',
width: 100
}]
}).data("kendoGrid");
}); // end edit
Okay, I got it:
These 2 lines make it happen:
var grid = $("#rt_tableGrid").data("kendoGrid");
grid.editRow($("#rt_tableGrid tr:eq(1)"));
Certainly only on my local script, in the Fiddle I cant´t get it to work.
Although in the Docu is written: Requires "inline" or "popup"
Documentation here

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.

Categories