I'm new in Extjs. I would like to know. Which components I can use, to make a menu and toolbar like in desktop app?
I mean something like this.
I wrote this code, but the result is not similar to desktop app menu.
Ext.define('untitled.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
width: 200,
height: 150,
tbar: [{
xtype: 'button',
text: 'Select',
menu: Ext.create('Ext.menu.Menu', {
items: [{
text: 'JavaScript',
handler: function () {
alert('Selected JavaScript');
}
}, {
text: 'Java',
}, {
text: 'C/C++'
}]
})
}]
});
New -------
Thank you very much, and the last question. How can I remove this arrow?
Here is fiddle for you - desktop-like toolbar (use your iconCls for Icon buttons).
Ask if you need something updated.
Related
I know nothing about Ext.js but I am being tasked with enhancing some of our front end JavaScript that uses it. I have the following code:
xtype: 'fieldset',
docked: 'bottom',
flex: 1,
defaults: {
xtype: 'button',
style: 'margin: .5em',
flex: 1,
},
layout: {
type: 'hbox',
},
items: [{
text: 'Submit',
ui: 'plain',
itemId: 'shareOutButton',
cls: 'btn btn-primary',
action: 'submitShareListing',
},
{
text: 'Done',
ui: 'plain',
itemId: 'doneButton',
cls: 'btn btn-primary',
handler: function () {
this.up('ShareOutWindow').close();
},
}],
When the user clicks on the doneButton - I simply want to close the current panel (it has the ID of ShareOutWindow') that is displayed. I have tried several things .close(), .hide() etc. I am able to get a reference to an object using the this..... but I cannot figure out how to close or hide the panel once I get a reference to it.
I have also tried this function -- but the panel does not go away and I don't get an error message.
handler: function () {
this.up('ShareOutWindow').close;
},
Any help would be greatly appreciated
First of all to stress it: I'm using sencha modern.
Well consider the following view:
Ext.define('myApplication.view.main.OrderView', {
extend: 'Ext.Container',
xtype: 'ordercontainer',
controller: 'order',
requires: [
'Ext.MessageBox',
'Ext.layout.Fit'
],
viewModel: 'main',
defaults: {
tab: {
iconAlign: 'top'
},
flex: 1
},
layout: 'vbox',
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
click: 'onClick'
}
},
]
});
With the corresponding controller:
Ext.define('myApplication.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
onClick: function () {
debugger;
alert('onClick');
}
});
now I can see the button when the page is loaded. I expect the onClick function to be called (as per guide). However it is not. I don't see any alert, nor will (when development console is open in chrome) the debugger halt on the onClick function.
If I change the button to use a handle and use code-behind it works. Yet the view controller doesn't work. This shouldn't fail right? Or did I once again fall into the trap of using a guide for classic?
It's because in Modern the components doesn't have event click but tap
So change your code like this:
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
tap: 'onClick'
}
},
]
Good day all.
In EXTjs, probably 4.x version, I have a menu with a couple of levels of sub-menus
I'd like to add a data attribute to some of those sub-menus and actually I can do this with no problems with:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 4});
but this is working only for the first element of the menu (to be clear, the element that is shown upon loading.
For any other element of the menu, first of all I have to click the menu to show all the sub-menu and only at that time I can use the getEl() function, otherwise this error is shown:
Uncaught TypeError: Cannot read property 'set' of undefined
I understand that I'd need to... show? render? well, "do something" to those sub elements in order to have them in the dom properly... I attach part of the code:
this is part of the menu I create:
xtype: 'button',
id:"notificationMenu",
hidden: false,
reference: 'userType',
style: 'color: #ffffff;width:58px;height:58px;',
glyph: 0xf0f3,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"TASKS",
disabled:true
},
{
text:"Campaigns",
data_id:"me_campaigns",
glyph:0xf0c1,
id:"notification_me_campaigns_root",
hidden:true,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"Approval",...
in this example, if I make after Render:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 10})
but if I use
Ext.getCmp("notification_me_campaigns_root").getEl().set({"data-notifynumber": 4})
the error above is shown. please do you have some advice? may I call a "force render" somehow?
Try to use afterrender to get dom element.
ExtJs getEl() Retrieves the top level element representing this component but work when dom is prepared without dom creation it will return null.
I have created an Sencha Fiddle demo hope this will help you to achieve you requirement/solution.
var panel = new Ext.panel.Panel({
renderTo: document.body,
title: 'A Panel',
width: 200,
tools: [{
xtype: 'button',
text: 'Foo',
menu: {
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Item 1'
}, {
text: 'Item 2',
menu: {
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 20//only for example you can put as basis of your requirement
});
}
},
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Sub Item 1',
}, {
text: 'Sub Item 2'
}]
}
}],
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 10//only for example you can put as basis of your requirement
});
}
}
}
}]
});
i have strange issue with removing item from fieldset. my app success adding new textfield fieldset item, buth when i do remove() my app screen got stuck without any error on my google chrome.
here my source
view js
Ext.define('qms.view.QC23', {
extend: 'Ext.form.FormPanel',
alias: 'widget.QC23View',
id: 'QC23View',
requires: ['Ext.form.FieldSet', 'Ext.Label'],
config: {
items: [
{
xtype: 'fieldset',
//defaults: { labelAlign: 'top' },
Id:'defectAdd',
layout:{
},
items: [
{
xtype: 'button',
text: 'New Defect',
id: 'DefectQC23Button',
ui: 'action'
},
{
xtype: 'button',
text: 'Remove Defect',
id: 'RemoveQC23Button',
ui: 'action'
}
]
}
]
}
and my controler
Ext.define('qms.controller.QC23con', {
extend: 'Ext.app.Controller',
config: {
refs: {
addDefectButton:'#DefectQC23Button',
rmDefectButton:'#RemoveQC23Button'
},
control: {
addDefectButton:{
tap: 'addDefect'
},
rmDefectButton:{
tap: 'removeDefect'
},
}
},
addDefect: function(button){
button.up('fieldset').add({
xtype: 'textfield',
name: 'MyField-' + button.up('fieldset').length
});
//Ext.getCmp('defectAdd').doLayout();
},
removeDefect: function(button){
button.up('fieldset').remove(button.up('fieldset').items.items[0]);
}
the function for adding item work fine, but when i remove the item my screen stuck. i am using google chrome for testing.
please give me solution for this issue.
thanks.
I noticed you are not checking for the xtype before removing an item from the fieldset. The code might be removing the button itself in which case it might cause your screen to freeze. I created a simple sencha fiddle https://fiddle.sencha.com/#fiddle/4tf that does what you are trying to accomplish.
replace the removeDefect function with this:
var lastItem = button.up('fieldset').items.items.length-1;
if(button.up('fieldset').items.items[lastItem].xtype ==='textfield')
button.up('fieldset').remove(button.up('fieldset').items.items[lastItem]);
I have some trouble using an Ext.Panel in Sencha Touch 2.2. It works at first, but after building it can't be closed though hideOnMaskTap is true.
Here's my code:
MinPanel.js
Ext.define('MinimalPanelExample.view.MinPanel', {
extend: 'Ext.Panel',
requires: [
'Ext.dataview.List'
],
config: {
id: 'minPanel',
width: '320px',
height: '480px',
modal: true,
hideOnMaskTap: true,
html: 'minimal panel',
items: [
{
xtype: 'list',
width: '100%',
height: '100%'
}
]
}
});
Adding it in Main.js:
var minPanel = Ext.create('MinimalPanelExample.view.MinPanel');
[...]
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2',
items: [
{
xtype: 'button',
text: 'Button',
listeners: {
tap: function(button) {
minPanel.showBy(button);
}
}
}
],
},
What's curious is that the list inside the panel isn't even shown if I run the built package, it just shows the html: 'minimal panel'. There's no warnings in the Javascript console, though.
Any ideas about why that happens?
Also, feel free to tell me if my way of creating / accessing the panel in the first place is wrong.
Figured it out. You can't just Ext.create on top of the Main view file, it has to be somewhere in the Ext.define block. It works if I create the MinPanel in an initialize listener, and then get it via Ext.getCmp('minPanel') when the user presses the button.