I have form for editing product with Image panel in east side. I want that image will have width: 200, height: 200. And form float it. How to do it?
Edit:
You can see that in attached image, area below image empty
Here is items section of this Window
items: [{
xtype: 'tabpanel',
border: false,
items: [{
xtype: 'container',
title: 'General',
border: false,
layout: 'border',
region: 'left',
border: false,
items: [{
xtype: 'container',
region: 'center',
layout: 'border',
//height: 175,
flex: 1,
border: false,
items: [{
xtype: 'webposform',
id: 'productinfo',
startfocused: true,
region: 'center',
items: [{
xtype: 'textfield',
hidden: true,
name: 'id',
},{
xtype: 'textfield',
fieldLabel: 'SKU',
name: 'sku',
},{
xtype: 'textfield',
fieldLabel: 'Product name',
name: 'name',
},{
xtype: 'posdecimalfield',
fieldLabel: 'Sales Price',
name: 'price',
},{
xtype: 'posdecimalfield',
fieldLabel: 'Cost Price',
name: 'cost',
},{
xtype: 'textfield',
fieldLabel: 'EAN',
hideTrigger: true,
keyNavEnabled: false,
name: 'ean',
},{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
bodyPadding: 5,
border: false,
defaults: {
labelWidth: 120,
anchor:'100%'
},
items: [{
hidden: true,
xtype: 'textfield',
name: 'supplier'
},{
xtype: 'textfield',
region: 'center',
name: 'supplier_display',
fieldLabel: 'Supplier',
flex: 1,
readOnly: true,
},{
action: 'selectSupplier',
margin: '0 0 0 2',
xtype: 'button',
width: 25,
region: 'west',
text: '...',
}],
},{
xtype: 'textarea',
fieldLabel: 'Description',
name: 'description'
},]
},{
xtype: 'panel',
border: false,
layout: 'vbox',
align : 'stretch',
pack : 'start',
region: 'east',
items: [{
xtype: 'panel',
id: 'defaultimage',
bodyPadding: 5,
height: 200,
width: 200,
margins: '5 5 5 5',
region: 'center',
},{
xtype: 'panel',
border: false,
flex: 1
}]
}],
}],
},{
xtype: 'imagepanel',
title: 'Images',
layout: 'border',
}],
}],
What seems to be a problem? Use column or hbox layout and put all your fields into first column/container and the image into the second one.
Do you have code which you have tried already?
Related
I would like to create a form with fields at top and a pdf in the middle with ExtJS 3.4.
Displaying a pdf is no problem, a form with fields is no problem but putting both together did not work yet.
Displaying a pdf works with a panel, a form with fields is a Ext.form.FormPanel.
How can I embed the pdf in the form?
Here is what I tried:
var pdfForm = new Ext.form.FormPanel({
id: 'pdfForm',
width: 700,
cloasable: false,
waitMsgTarget: true,
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Z',
id: 'Z',
name: 'Z',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'X',
name: 'X',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Y',
name: 'y',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'M',
name: 'M',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'tabpanel',
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 100%; width: 100%',
src: 'http://' + serverIP + '/documents/18/bc1bca0a-d437-4505-aee4-9cbe63553a6d'
}
}]
}]
});
The decisive code is in the last few lines. "autoel" does not match with the Ext.form.FormPanel.
Are there any alternatives?
I found the solution.
The main step is to use an Ext.Panel instead of a form.
var formPanel = new Ext.Panel({
frame: true,
renderTo: 'formPanel',
scrollable: 'true',
title: '',
id: 'mainPanel',
autoHeight: true,
autoWidth: true,
layout: 'form',
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '1',
id: '1',
name: '1',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '2',
name: '2',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'box',
autoEl: {
tag: 'embed',
id: '3',
name: '3',
style: 'height: 100%; width: 100%',
type: 'application/pdf',
src: 'http://<ip>/<path>.pdf'
}
}]
});
var pdfDlg = new Ext.Window({
id: 'pdfDialog',
title: 'PDF',
layout: 'fit',
width: 1000,
height: 700,
minWidth: 1000,
minHeight: 500,
closeAction: 'hide',
closable: true,
resizable: false,
plain: true,
modal: true,
items: 'mainPanel',
constrainHeader: true
});
I have created a layout in sencha using vbox and hbox layout.But the issue is when I uses textfield and textareafield ,its size remain same even though the screen size varies.
I searched a lot on google and found many having the same issue.
Code below
Ext.define('GS.view.RequestNew', {
extend : 'Ext.form.Panel',
xtype: 'requestnew',
requires: [
'Ext.Label',
'Ext.Img',
'Ext.field.TextArea'
],
config: {
title : 'Test',
iconCls: 'favorites',
layout:'fit',
items: [
{
xtype: 'panel',
layout: 'vbox',
items: [
{
flex: 1,
layout: 'vbox',
items: [
{
flex: 9,
layout: 'vbox',
style: 'background-color: #A96D13;',
items : [{
flex: 1,
layout: 'vbox',
items:[{
flex: 1,
layout:'vbox',
items: [{
flex: 1,
layout:'vbox',
style:'background-color: #C48627;',
margin : '6px 6px 6px 6px',
items:[{
flex: 1,
layout:'vbox',
style:'background-color: #C48627;',
margin : '6px 6px 6px 6px',
items:[
{
flex: 1,
layout:'vbox',
items: [{
flex: 1,
layout:'vbox',
items:[
{
flex: 1,
xtype: 'label',
html: 'Source Location',
style: 'color:white;font-weight:bold;margin-top:21px;'
},
{
flex: 1,
layout:'hbox',
items:[
{
flex: 7,
layout: 'fit',
items : [{
xtype: 'textfield',
name: 'location',
height: 45,
maxRows: 10,
maxHeight: 10,
autoMaximize: true
}]
},
{
flex:1,
style:'background-color: #FEDE65;',
xtype: 'image',
src: 'http://abc/resources/images/img_dropdown_icon.png'
}
]
}
]
}]
}
]
}]
}]
}]
}]
}
]
}
]
}
]
} });
My carousel is rendering weird, it doesnt load items horizontally it loads them one above the other. It looks like this: http://postimage.org/image/3tisqjl9n/
Is it because i make a carousel inside of a formpanel ?
Here you can see my code:
config: {
title: 'More Info',
layout: 'fit',
items: [
{
xtype: 'formpanel',
id:"moreInfo",
items: [
{
id: 'moreContent',
tpl: [
'<div style="border-bottom 1px solid black">',
'<h2 style="margin-bottom:5px;text-transform:capitalize;font-weight:bold">Project: {project}</h2>',
'</div>'
].join(''),
},
{
xtype: 'carousel',
defaults: { cls: 'card'},
direction: 'horizontal',
layout: 'fit',
directionLock: true,
items:[
{
html: "<img src='image1'>",
},
{
html: "<img src='image2'>",
},
{
html: "<img src='image3'>",
},
{
html: "<img src='image4'>",
},
]
},
{
xtype: 'fieldset',
defaults: {
labelWidth: '35%'
},
title: 'Receipts',
items: [
{
xtype: 'button',
id: 'takePicture',
padding: '10px',
text: 'Taka a picture'
},
{
xtype: 'textfield',
label: 'Price',
name: 'price'
},
{
xtype: 'textfield',
label: 'Vendor',
name: 'vendor'
},
]
},
{
xtype: 'button',
id: 'receiptSave',
padding: '10px',
ui:'confirm',
text: 'Save'
},
]
},
],
},
I want a rounded list view in Sencha Touch 2. For that, i used ui:round attribute. But it is not working. Now left side, it is coming rounded. But for right side, it is not coming properly. And i want the list inside that rounded border. Below is my code:
Here is my code:
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
draggable: true,
styleHtmlContent: true,
title: 'Artist',
items: [
{
xtype: 'list',
height: 696,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{firstName}'
],
store: 'name',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
styleHtmlContent: true,
scrollable: true,
title: 'Albums',
items: [
{
xtype: 'list',
height: 730,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{albumlist}'
],
store: 'albumstore',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
styleHtmlContent: true,
title: 'Playlist',
items: [
{
xtype: 'list',
height: 700,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{playlist}'
],
store: 'playliststore',
onItemDisclosure: true
}
]
}
],
tabBar: {
docked: 'top',
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
}
}
});
Now it is coming in rounded list. But scrolling is not coming properly. It is not going till the end of the list.
You have included some redundant configs to your components.
I've only made changes to MyTabPanel.js (quite a lot).
This is the source code after editing, it works well for Artist List, and it's similar to apply to other components as well:
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
layout: 'card',
//draggable: true,
styleHtmlContent: true,
title: 'Artist',
items: [
{
xtype: 'list',
//height: 696,
ui: 'round',
//width: 325,
//modal: true,
itemTpl: [
'{firstName}'
],
store: 'name',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
layout: 'card',
styleHtmlContent: true,
//scrollable: true,
title: 'Albums',
items: [
{
xtype: 'list',
height: 730,
ui: 'round',
width: 325,
modal: true,
itemTpl: [
'{albumlist}'
],
store: 'albumstore',
onItemDisclosure: true
}
]
},
{
xtype: 'container',
layout: 'card',
styleHtmlContent: true,
title: 'Playlist',
items: [
{
xtype: 'list',
//height: 700,
ui: 'round',
//width: 325,
//modal: true,
itemTpl: [
'{playlist}'
],
store: 'playliststore',
onItemDisclosure: true
}
]
}
],
tabBar: {
docked: 'top',
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
}
}
});
Just wondering if anyone can let me know how I can get these three buttons to centered and evenly spaced within the container?
Ext.define('rpc.view.home.indexView', {
extend: 'Ext.Panel',
alias: 'widget.homeView',
config: {
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'center'
},
defaults: {
xtype: 'button',
margin: '10 10 0 10'
},
items: [{
text: 'Videos',
cls: 'x-button-quicknav'
}, {
text: 'Events',
cls: 'x-button-quicknav'
}, {
text: 'Sites',
cls: 'x-button-quicknav'
}]
}]
},
initialize: function () {
console.log('rpc.view.home.index ~ initialize');
}
});
Nailed it
JS
xtype: 'container',
layout: {
type: 'hbox',
pack: 'center'
},
defaults: {
xtype: 'button',
ui: 'plain',
style: 'margin-top: 5px;'
},
items: [{
text: 'Videos',
cls: 'x-button-rpc',
flex: 1
}, {
xtype: 'container',
cls: 'x-button-rpc-spacer'
}, {
text: 'Events',
cls: 'x-button-rpc',
flex: 1
}, {
xtype: 'container',
cls: 'x-button-rpc-spacer'
}, {
text: 'Sites',
cls: 'x-button-rpc',
flex: 1
}]
CSS
.x-button-rpc{
border-radius: 5px;
border:1px solid #c4c4c4 !important;
background-color: White !important;
}
.x-button-rpc-spacer{
display: inline-block;
width: 5px;
}