I have created a toolbar with menu item in it:
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
padding: '30 0 0 0',
width : '100%',
items: [
{
xtype: 'splitbutton',
text : 'File',
menu: Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [
{
text: 'Import',
// code here
}
]
})
}
]
});
So what I am trying to do is to be able to use Import button just like File->Open.
I know that I can add xtype: 'filebutton', but it shows the browse button with the text field.
Also I want to let the user to choose only certain file extensions. After file is selected (we click open), I want to add it to my file tree in my viewport.
Thanks for any help.
I figured it out by using xtype: 'fileuploadfield' and hiding the file name/text field.
xtype: 'fileuploadfield',
buttonText : 'Open',
buttonOnly: true,
It is as simple as it gets. Just create a toolbar and have this code in its item field.
Related
I have the following custom component build
Ext.define('TRA.view.MainMenuItemView', {
xtype: 'mainmenuitem',
extend: 'Ext.Container',
text: 'Menu text',
icon: './resources/icons/Icon.png',
tap: function(){
},
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [
{
width: '115px',
height: '115px',
style: 'border-radius: 50%; background-color: #e4e4e6',
items: [
{
xtype: 'image',
src: '',
width: '65px',
height: '65px',
centered: true
}
]
},
{
xtype: 'label',
html: '',
margin: '5px 0',
style: 'color: #455560; text-align: center; text-transform: uppercase; font-weight: bold;'
}
]
},
initialize: function() {
var me = this;
me.callParent(arguments);
//set icon
me.getAt(0).getAt(0).setSrc(me.icon);
//set text
me.getAt(1).setHtml(me.text);
//setup componet event
me.element.onAfter('tap', me.tap);
}
})
and I'm using it on other containers as this
{
xtype: 'mainmenuitem',
text: 'Signal Coverage',
icon: './resources/images/icon-signal-coverage.png',
tap: function() {
var nav = Ext.ComponentQuery.query('#mainnavigationview')[0];
nav.push({
title: 'Signal Coverage',
html: 'test Signal Coverage'
});
}
}
Quite strangely it all works all well normally except when I build the sencha app for native or for web build using sencha cmd
sencha app build production
the production version does not overwrite icon and text properties of my custom component. while it all works well on normal version. what could be issue?
first of all, some ideas to make your code easier readable for others:
1) the first item does neither have an xtype nor does a defaultType define it
2) width: '115px', height: '115px', just could be width:115,height115
3) instead of me.getAt().getAt() define an itemId for these and use me.down('#theItemId')
3a) or use Ext.Component to extend from and add a template with references. That way it's me.referenceElement
4) me.onAfter('tap',... not sure if this will work on an item that does not support the tap event. you might need to set a tap event to me.element and from there you can use a beforetap
5) instead of add me.getAt().getAt().setText(me.text) use the updateText: function(newValue) {this.getAt().getAt().setText(newValue)}
Same for the icon
then my personal opion
Personally I never expected this code to run anyways. But the fix might be to write me.config.icon and me.config.text
Solution
It's a matter of timing. While the constructor runs there are no icon or text defined inside the config.
This happends only on initialize. there you have them inside the config.
go and add icon: null, text: '' to the config of the component and it will word with getter and setter.
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
Please let me know, how to add checkbox column in a grid.
I tried the following. But its read only checkbox.
Should I use checkboxModel? if so, then please let me have the complete code
Here you go, an Ext4 example matching any data element:
{
xtype: 'checkcolumn',
header: 'My Checkbox column',
dataIndex: 'myBooleanFieldThatMatchesTheModelFieldOfMyGridStore',
listeners: {// In case you want to perform a specific action on click...
checkChange: me.onCheckChange
},
flex: 1
}
Here is an example of a grid with a checkbox.
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: //
selModel: sm,
columns: //[]
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection',
renderTo: Ext.getBody()
});
I am trying to display a grid but add a panel in between List of customers and the columns Customer Id, active, firstname last name, email address.
I need to add a panel between these 2 componants. And in that panel i will be having different UI elements. How can i do this ?
Well I believe you have just a grid with The title list of costumers, The easiest way is to have a panel and a grid (grid with no title) into another panel with the title.
{
xtype: 'panel',
title: 'List of customers',
layout:'border',
items: [
{
//the panel you want
xtype: 'panel',
region: 'north',
height: 100,
},
{
//your current grid without a title
xtype: 'gridpanel',
region: 'center',
height: 300,
}
]
}
I need to add panel, with title "List if Customers" and vertical layout. In it you need to add two items: your new panel, and that grid (without title). There you will get what yout want.
{
xtype: 'panel',
layout: {
type:"vbox",
pack:"start",
align:"stretch"}
title:"List of Customers",
items: [ ... your new panel and grid .. ]
}
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.