Extjs 6: Adding modal window doesn't mask tbar and header - javascript

I have a view which act as container for my grid.
This view owns a tbar and a header.
When I add a modal window, the header and the tbar aren't masked.
Mainview:
Ext.define('myApp.view.customer.MyMain', {
extend: 'Ext.panel.Panel',
xtype: 'hlx-customermain',
controller: 'maintoolbar',
plugins: 'viewport',
header: {
xtype: 'myheader'
},
tbar: {
xtype: 'mytoolbar'
},
items: [
{
xtype: 'mygrid'
}
]
});
Grid (which uses the controller to add the window)
Ext.define('myApp.view.customer.MyGrid', {
extend: 'Ext.grid.Panel',
xtype: 'mygrid',
tbar: {
xtype: 'mygridtoolbar'
},
controller: 'mygrid',
store: 'MyGridStore',
columns: [
...
]
});
Function from the ViewController
onCustomerAddClick: function () {
var me = this,
addCustomerWindow = me.lookupReference('addCustomerWindow');
if (!addCustomerWindow) {
addCustomerWindow = new myApp.view.customer.AddCustomer();
me.getView().ownerCt.add(addCustomerWindow);
}
addCustomerWindow.show();
}
Even tough I add it to the ownerContainer - which is the MyMain-class - the tbar and the header aren't masked.
See this fiddle to experience the error yourself: https://fiddle.sencha.com/#fiddle/uih

You don't have to add it to it's owner or what so ever. Just do this:
onAddCustomerClick: function () {
/*var me = this,
myWindow = me.lookupReference('myWindow');
if (!myWindow) {
myWindow = new MyWindow();
me.getView().ownerCt.add(myWindow);
}
myWindow.show();*/
var myWindow = Ext.create('MyWindow');
myWindow.show();
}

Related

onClick event doesn't work in Firefox

I have a function previewPost for the onClick event but it doesn't work on Firefox Browser.. even if I call a single alert() in the same event doesn't work.
<script type="text/javascript">
function previewPost() {
Ext.define('WindowPost', {
extend: 'Ext.window.Window',
requires: [
'Ext.form.field.Text'
],
height: 250,
width: 400,
title: 'My Window',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
fieldLabel: 'ID',
value: this.algo
}
]
});
me.callParent(arguments);
}
});
var win = Ext.create('WindowPost',{"algo": "input"});
win.show();
}
Ext.onReady(function(){
Ext.define('DataView', {
extend: 'Ext.view.View',
alias: 'widget.dataview',
requires: [
'Ext.XTemplate'
],
id:'dataView2',
height: 25,
width: 1800,
//border:true,
emptyText: '',
itemSelector: 'div.ticket-wrapper2',
store:'storee2',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
itemTpl: [
'<tpl>',
' <div class="ticket-wrapper2" onclick="previewPost()" >{area_comun.nombre}</div> ',
'</tpl>'
]
});
me.callParent(arguments);
}
});
var dta = Ext.create('DataView');
dta.render('content');
});
</script>
Here's where I call the function
itemTpl: [
'<tpl>',
' <div class="ticket-wrapper2" onclick="previewPost()" >{area_comun.nombre}</div> ',
'</tpl>'
]
The onclick HTML attribute is very old and should not be relied upon. Instead, give an id to your div:
<div id="wrap_1" class="ticket-wrapper2">
Then add a click event listener, wrapped in a page load event listener (so it won't matter where you put it), somewhere in your javascript:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('wrap_1').addEventListener('click', previewPost);
});
This will work for every browser back to IE 9.

Editor cannot disappear after closing Window

I got a problem on Ext 4.1.0 and Ext 4.1.1
Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.
Anyone met this problem before? Thanks
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var table = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: { xtype: 'textfield', toFrontOnShow: false }
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'numberfield',
hideTrigger: true,
validateOnChange : false
}
}
],
height: 200,
width: 400,
plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})]
});
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [table]
});
window.show();
});
The easiest way to handle this for you, would be to listen to the window's beforeclose event and cancel any editing in this event using the celleditor's cancelEdit method as described here in the docs.
For example, here is your window object (from your code above) with the listener applied:
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [ table],
// add this listener to your window
listeners: {
beforeclose: function(panel) {
var view = panel.down('gridview');
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
}
}
});
Reply to comment:
Here's an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.
Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn't have to include the override in the app) but I wouldn't recommend doing that for a number of reasons.
Ext.override(Ext.grid.plugin.Editor, {
init: function(grid) {
// the normal init code (below) must be included in the override
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
'beforeedit',
'edit',
'validateedit',
'canceledit'
]);
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
// additional code to cancel editing before a grid is hidden
grid.on('beforehide', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
// additional code to cancel editing before a grid is destroyed
grid.on('beforedestroy', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
}
});
I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.

Sencha Touch 2.x - How to load a custom view into a tab panel? Use xtype?

I am completely new to Sencha 2 Touch. This is my second day playing with it.
I have a custom class (app/view/Howdy.js):
Ext.define('MyApp.view.Howdy', {
extend: 'Ext.Panel',
xtype: 'howdy', // <--- this creates the 'howdy' xtype reference right?
requires: [
'Ext.SegmentedButton'
],
config: {
fullscreen: true,
html: ['Hello Word.'].join("")
}
});
and I am now trying to load it into a tab when clicked:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'TAB 1',
iconCls: 'star',
xtype: 'howdy', // <--- WHY IS THIS CRASHING MY APP?
},
]
}
});
If I remove the xtype declaration inside TAB 1 and replace it with an html everything works fine. As soon as I try and load my custom view into the tab all I get is a white screen in my browser and console shows no errors ???
P.S Yes everything is setup correctly already in App.js:
views: ['Howdy','Main'],
HELP PLEASE!
Late to update this thread but the solution was simply to remove the fullscreen: true declaration from inside the config in MyApp.view.Howdy.
I hope that this will help you:
MyApp.view.Howdy
Ext.define('MyApp.view.Howdy', {
extend: 'Ext.Container',
xtype: 'howdy',
requires: [
'Ext.SegmentedButton'
],
config: {
incoCls: 'star',
title: 'TAB 1',
html: ['Hello Word.'].join("")
}
});
MyApp.view.Main
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{xclass: 'MyApp.view.Howdy'},
]
}
});
You should use alias: widget.XTYPE
Ext.define('MyApp.view.Howdy', {
extend: 'Ext.Panel',
alias: 'widget.howdy', // <--- this creates the 'howdy' xtype reference right?
requires: [
'Ext.SegmentedButton'
],
config: {
fullscreen: true,
html: ['Hello Word.'].join("")
}
});
A couple of things. First, xtype is what you use to define the type if you're adding it instantly...if you haven't already defined it with Ext.create. If you've already created it, then you don't need it. When creating panels, each item contains all the info for itself, title, icon, everything. Then, just add the item(s) into a tabPanel:
var a = Ext.create('Ext.Panel',{
iconCls:'star',
title:'tab1',
html:'tab one content'
});
var b = Ext.create('Ext.Panel',{
iconCls:'star',
title:'tab2',
html:'tab two content'
});
var panel = Ext.create('Ext.TabPanel',{
items:[a,b]
});

GridPanel as item of tabPanel

I'm having trouble knowing if I syntactically have this setup right. From another thread, I understand to add the GridPanel to the tabBar items, which I do so below. In my App.js, I define a grid copied from the ExtJS example (here).
var grid = new Ext.grid.GridPanel({
// Details can be seen at
// http://dev.sencha.com/deploy/ext-3.4.0/docs/?class=Ext.Component?class=Ext.grid.GridPanel
});
Below that, I create an instance of my app:
appname.App = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
ui: 'gray',
dock: 'bottom',
layout: { pack: 'center' }
},
cardSwitchAnimation: false,
initComponent: function() {
if (navigator.onLine) {
// Add items to the tabPanel
this.items = [{
title: 'Tab 1',
iconCls: 'tab1',
xtype: 'tab1',
pages: this.accountPages
}, {
title: 'Tab 2',
iconCls: 'tab2',
xtype: 'tab2',
pages: this.accountPages
},
grid];
} else {
this.on('render', function(){
this.el.mask('No internet connection.');
}, this);
}
appname.App.superclass.initComponent.call(this);
}
});
The app normally loads just fine, but with the addition of grid, it breaks and nothing loads.
Syntactically, should I be defining grid inside the app instantiation like A) grid: ..., B) this.grid = new ..., or C) as I have it as a regular var named grid?
Many thanks.
There is no inbuilt GridPanel comes with Sencha Touch. So, that Ext.grid.GridPanel will not work here. However, you can use Simoen's TouchGrid extension from here.
All the source codes are available here.

How to completely hide the dockedItems toolbar

I'm able to hide items among the dockedItems of a TabPanel, but am wanting to temporarily hide the entire dock, because the toolbar itself still takes up space and the rest of the content does not fill the screen.
So far, I do like so:
myApp.views.productList.dockedItems.items[0].removeAll(true);
myApp.views.productList.doComponentLayout();
Alternatively:
myApp.views.productList.getComponent('search').removeAll(true);
myApp.views.productList.doComponentLayout();
But neither removes the dockedItems toolbar itself.
I've even tried to give the dockedItems individually and collectively an id: to remove the whole component, but without luck. I've also tried moving the toolbar in question out from the docked items and into the items: property of the containing panel, but this breaks other things in my app that I'd rather not change at present.
Any clues on how to do this?
If I understand you correctly you want to temporally remove tabBar from a tabPanel. I was able to accomplish this through giving and id to my tabBar and then using removeDocked and addDocked methods. I'm new to sencha-touch so most likely there is a better way of doing this
The code below removes tabBar from tabPanel and then adds it back again.
Ext.setup({
onReady: function() {
var tabpanel = new Ext.TabPanel({
ui : 'dark',
sortable : true,
tabBar:{
id: 'tabPanelTabBar'
},
items: [
{title: 'Tab 1',html : '1',cls : 'card1'},
{title: 'Tab 2',html : '2',cls : 'card2'},
{title: 'Tab 3',html : '3',cls : 'card3'}
]
});
var paneltest = new Ext.Panel({
fullscreen: true,
dockedItems:[
{
xtype: 'button',
text: 'Disable TabBar',
scope: this,
hasDisabled: false,
handler: function(btn) {
console.log(btn);
if (btn.hasDisabled) {
tabpanel.addDocked(Ext.getCmp('tabPanelTabBar'), 0);
btn.hasDisabled = false;
btn.setText('Disable TabBar');
} else {
tabpanel.removeDocked(Ext.getCmp('tabPanelTabBar'), false)
btn.hasDisabled = true;
btn.setText('Enable TabBar');
}
}}
],
items:[tabpanel]
});
paneltest.show()
}
})
в dockedItems добавить button, которая будет обращаться к элементу panel.dockedItems и изменять/скрывать сам dockedItems
function f_create_accord(P_el_id, P_el_params) {
P_el = Ext.create
(
'Ext.panel.Panel',
{
id: P_el_id
, border: false
, x: P_el_params.left
, y: P_el_params.top
, id_el: P_el_params.id_el
, layout: 'accordion'
, dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
P_el_id: P_el_id,
xtype: 'button',
text: 'добавить',
}, {
id_el: P_el_id,
xtype: 'button',
text: 'скрыть',
vision: true,
listeners: {
click: function (el, v2, v3) {
if (el.vision) {
Ext.getCmp(el.id_el).dockedItems.items[0].setHeight(5);
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].hide();
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(Ext.getCmp(el.id_el).getWidth());
el.vision = false
}
else {
Ext.getCmp(el.id_el).dockedItems.items[0].setHeight('15px');
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].show();
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(60);
el.vision = true
}
// Ext.getCmp(el.id_el).dockedItems.items[i].hide();
}
}
}]
}]
}
);
P_el.setStyle('position', 'absolute');
P_el.setStyle('box-shadow', ' 0px 0px 0px 1px green');
P_el.setStyle('background', 'border-box');
return P_el;
}

Categories