I was wondering if what is wrong with the way I setup my Panel. Together with a dataview I wanted to include a fileupload with it but it seems that it doesn't show in the panel itself (only the dataview). Any way on how to do this or how to correct it? Appreciate the help.\
var iPanel= new Ext.panel.Panel({
width: 490,
height: 500,
layout: 'fit',
title: 'Select an avatar',
floating: true,
closable : true,
items: {
extend: 'Ext.view.View',
xtype: 'dataview',
id: 'myDataView',
autoHeight:true,
reference: 'dataview',
itemSelector: 'div.dataview-multisort-item',
store: Ext.create('Admin.store.users.UsersAvatarStore'),
tpl: [
'<tpl for=".">',
'<div>',
'<a href="#">',
'<img id="{name}" src="resources/images/default-avatars/{thumb}" height="72" weigh="72"/>',
'</a>',
'</div>',
'</tpl>',
]
},
{
xtype: 'filefield', //this does not show in panel
id: 'form-file',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'photo-path',
buttonText: '',
buttonConfig: {
iconCls: 'upload-icon'
}
}
The issue in your code is you are using
layout: 'fit'
which will show one item in the container.
ref: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Fit
If the container has multiple items, all of the items will all be equally sized. This is usually not desired, so to avoid this, place only a single item in the container. This sizing of all items can be used to provide a background image that is "behind" another item such as a dataview if you also absolutely position the items.
Switch the layout to any other layout and it will work.
JS Fiddle: https://jsfiddle.net/hxscf26h/
Related
I have a Panel and in that panel I am loading grid dynamically.
Here is code for panel
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
itemId: 'MyGrid',
reference: 'MyGrid',
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
}
and Sample of grid.
Ext.define("MyApp.view.MYGrid", {
extend: 'Ext.grid.Panel',
alias: 'widget.MyGrid',
requires: [
'Ext.grid.filters.Filters',
'Ext.form.field.ComboBox',
],
emptyText: 'No data available.',
disableSelection: true,
margin: '3 3 0 3',
collapsible: true,
multiSelect: false,
closable: true,
columnLines: true,
uniqueFields: [],
});
initComponent: function() {
var me = this;
me.fields = me.prepareFields(me.headersXmlDoc);
me.columns = me.prepareColumns(me.headersXmlDoc);
me.store = me.prepareGridStore(me.headersXmlDoc);
this.callParent(arguments);
},
Now when Grid have enough data then both horizental and vertical scroll is coming correctly but When grid have less data with more columns scrollbar is coming down. I supposed just beow the last record but it comming in down.
All the grid is taking same height though it have a less record.
Example pic
https://i.stack.imgur.com/RKdTb.png
I want scrollbar just below the last data. By debugging I found layout : fit
But not sure how to overcome out from that.
Can anybody help me that. Thanks for help.
You need to apply overflowY as true for grid.I don't think there is some problem with fit layout.If above config doesn't work share some fiddle.
I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?
If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start
I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});
The value of height: should be a number, not a string. So use height: 50 instead.
I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.
I using Ext JS 2.3.0 and have a GridPanel that looks like this:
I want to expand the width of the column such that the scroll bar is pushed over the extreme right of the panel, thus eliminating the empty space to the right of the scroll bar.
The relevant code is shown below:
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
stripeRows: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
view: new Ext.grid.GridView(),
colModel: colModel,
selModel: selModel,
hidden: true,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
width: 50,
handler: function () {
}
},
{
text: locale["dialogSearch.button.cancel"],
width: 50,
handler: function () {
entitySearchWindow.close();
}
}
]
});
You should use the forceFit config for the grid view:
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
viewConfig: {
forceFit: true
}, ....
I'm not sure if this isn't redundant so you can remove this part view: new Ext.grid.GridView(),
The problem is not the column but the grid itself which does not stretch to fill the window body completely.
Put the layout: 'fit' property onto the window config instead of onto the grid config (where it needs to be removed). You should also remove the height property because the grid height will determined by the window's size.
Add
flex: 1,
to one of the the columns config
I have an existing toolbar and would like to add tabs to it that would flip between two panels that use a card layout. What would be my best option and are there any examples of doing so?
Is it possible to add the tabs to my existing toolbar? Changing the xtype on my existing buttons didn't provide me with the tabs I was hoping to see.
Create a tab panel which would contain my two cards, mapping each tab to its panel. With this option, can I add additional buttons and menus to the tab panel?
Here's a sample of my existing toolbar code, can message_button and attachments_button simply have an xtype of tab and then somehow emulate the tab functionality?
Ext.define('MyArchive.Toolbar', {
alias: 'myarchive.toolbar',
extend: 'Ext.toolbar.Toolbar',
dock: 'top',
width: '100%',
items: [
// Pretty straight forward buttons with a listener, nothing fancy
messages_button,
attachments_button,
'->',
{ xtype: 'button', id: 'forward-button', text: 'Forward' },
'-',
{ xtype: 'button', id: 'recover-button', text: 'Recover' },
'-',
{
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
items: [
{xtype: 'menuitem', id: 'download-original', text: 'Original', iconCls: 'download-icon'},
{xtype: 'menuitem', id: 'download-pdf', text: 'PDF', iconCls: 'pdf-icon'}
]
}
}
]
Is it possible to add the tabs to my existing toolbar? Changing the
xtype on my existing buttons didn't provide me with the tabs I was
hoping to see.
I've tried it. But no luck.
Create a tab panel which would contain my two cards, mapping each tab
to its panel. With this option, can I add additional buttons and menus
to the tab panel?
It is possible. But result looks ugly (you can decorate it with CSS).
Use tabpanel.tabBar.add() to add buttons and menus (Here is demo):
tabpanel.tabBar.add({
xtype: 'button',
text: 'hallo, I\'m a button'
});
tabpanel.tabBar.add({
xtype: 'splitbutton',
text: 'Download',
menu: {
xtype: 'menu',
id: 'download-menu',
// ans so on ...