I have added a Panel (i call it My Panel 1), and another panel within this panel (I call it My Panel 2), and then added a grid into the 2nd panel (to My Panel 2). When i click on the Restore Down or the re-sizing button of the browser, it doesn't shrink the components to fit the screen size. How can i solve this ?
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 469,
width: 729,
title: 'My Panel 1',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
height: 238,
title: 'My Panel 2',
items: [{
xtype: 'gridpanel',
height: 179,
title: 'My Grid Panel 1',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}, {
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
}, {
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}],
viewConfig: {
}
}]
}]
});
me.callParent(arguments);
}
});
I would suggest using a viewport - it automatically adjusts to the "view port" of your browser :)
Also do not set fixed width and height if you want them to be managed automatically.
Here is a sample: http://jsfiddle.net/dbrin/gWaCv/embedded/result/
Related
I have the following form defined:
Ext.define('Admin.view.messaging.MsgDataForm',{
extend: 'Ext.window.Window',
xtype: 'msgdataform',
title: 'Compose Practice Message',
defaultFocus: '[name=subject]',
modal: true,
layout: 'fit',
closable: false,
width: 700,
items: [{
xtype: 'form',
layout: 'anchor',
fieldDefaults: {labelWidth: 60,labelAlign: 'right',anchor: '100%'},
padding: 10,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Date',
items: [{
xtype: 'datefield',
name: 'msgdate',
format: 'F j, Y g:i A',
readOnly: true,
flex: 1,
margin: '0 5 0 0'
},{
xtype: 'combo',
name: 'priority',
fieldLabel: 'Priority',
store: Ext.create('Ext.data.Store',{
fields: ['priorityval','priority'],
data: [{'priorityval':0,'priority':'Low'},{'priorityval':1,'priority':'Normal'},{'priorityval':2,'priority':'High'}]
}),
queryMode: 'local',
displayField: 'priority',
valueField: 'priorityval',
width: 160
}]
},{
xtype: 'textfield',
name: 'subject',
fieldLabel: 'Subject'
},{
xtype: 'textarea',
id: 'editor1',
name: 'message',
style: {background: '#E1E1E1'}
}]
}],
buttons:[{
text: 'Send',
handler: 'onClick_btnMsgDataSend'
},{
text: 'Cancel',
handler: 'onClick_btnMsdDataCancel'
}]
});
The height of the textarea is not properly sized when the window is rendered. Additionally, when the window is resized, only the width of the textarea is resized - not the height. Attempting to listen to the resize event on the text area after the window is resized but it isn't fired. Any ideas? Thanks.
You width is properly resized because of the default configuration of 'anchor:100%'.
On the other hand, the height it's a little bit more difficult, the idea that comes to me now is try to with a particular css (using property cls) manipulate the height (height:'100%') or something like that. Because you can't use flex in a textarea, you could also nest de textarea in a panel and use flex on it to try it.
Check the documentation of textarea of ExtJS5 for other posible solutions:
http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.form.field.TextArea
I want signature popup in my application.
'https://market.sencha.com/extensions/signature-pad-field'
This works for me but It opens one panel then on click on that panel it opens signature popup.
But I directly want to open Signature popup.
Please guide me. Thanks in advance.
By using below code as your "/signaturefield/app/view/Signature.js", you can achieve this:
Ext.define('myApp.view.Signature', {
extend: 'Ext.Container',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet'
],
config: {
layout: 'card',
items: [{
xtype: 'formpanel',
padding: '10 10 10 10',
items: [{
xtype: 'fieldset',
hidden: true,
items: [{
xtype: 'signaturefield',
id: 'signatureField',
sigWidth: 350,
sigHeight: 150,
label:'Enter Signature',
labelWidth: '20%'
}]
},{
xtype: 'button',
text: 'Get Data',
margin:'0 0 10 0',
action: 'getSignature'
},{
xtype: 'button',
text: 'Set Data',
action: 'setSignature'
}]
}]
},
initialize: function() {
this.callParent();
Ext.getCmp('signatureField').openCanvasSheet();
}
});
Hope this will be helpful :)
I am using Extjs 4.1.1
I have panel on which I have added toolbar at bottom side.
This toolbar has 3 items, I want to aling first item in first row, and rest two items in next row, i.e. one below others.
as shown in the image, I want to align the items as shown above to the Red Rectangle.
My code is as given below.
Please suggest How can I do that?
my code is like this
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
height:60,
items: [
{
xtype: 'tbtext',
id:'costId',
text : "Total Cost <br> $66,000",
height : 40
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'saveButton',
text: 'Add to BOM',
handler: function() {
saveProduct();
}
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'cancelButton',
text: 'Cancel',
handler: function() {
cancel();
}
}
]
}],
One possible solution would be adding two bottom toolbars to the panel. Just like this:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [{
text: 'Add to BoM',
cls: 'add-to-bom-button'
}, {
text: 'Cancel',
cls: 'cancel-button'
}]
}, {
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [costContainer]
}]
where costContainer is
var costContainer = Ext.create('Ext.container.Container', {
border: false,
layout: 'vbox',
items: [{
xtype: 'label',
html: 'Total Cost',
cls: 'total-cost-label'
}, {
xtype: 'label',
html: '$ 66,000',
cls: 'price-label'
}]
});
I think this example looks like what you are looking for, just have to fix the css.
http://jsfiddle.net/alexrom7/LHK39/3/
I need to create an anchored popup window containing buttons which when clicked a new view is created. Please refer to screenshot below (taken from the yelp mobile app). I have not been able to find examples of this functionality - thanks
I think that what you are looking for is really just a floating panel.
See for instance the sencha docs and their example using the showBy method.
Hope that this helps you.
I don't knw how to create an anchored popup window but you can try implementing Action Sheet in Sencha Touch-2. It is not anchored but it can contains buttons on which you can provide functionality.
This issue can be resolve by calling a panel inside a container.
//Add container1.js in view
Ext.define('Sencha.view.container1', {
extend: 'Ext.Container',
alias: 'widget.container1',
xtype: 'container1',
//fullscreen: true,
config: {
scrollable: true,
height: 50,
items: [
{
docked: 'top',
xtype: 'titlebar',
items: [
{
xtype: 'button',
ui: 'confirm',
text: 'Back',
itemId: 'button113',
id: 'rightButton',
handler: function () {
var sh = Ext.create('Sencha.view.panel1', {
extend: 'Ext.Panel',
fullscreen:true,
});
sh.show();
}
}
]
}
]
}
});
//Add panel1.js also in View
Ext.define("Sencha.view.panel1", {
extend: "Ext.Panel",
alias: "widget.panel1",
config: {
html: 'Floating Panel',
//left: 0,
//padding: 50,
items: [
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Edit Bussiness',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Add Photo',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Add BookMark',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Check In',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Write Review',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Make Reservation',
},
{
xtype: 'button',
ui: 'action',
height: 20,
text: 'Cancel',
handler: function() {
this.up('panel').hide();
}
},
],
listeners: [
{ hide: { fn: function(){ this.destroy();} }},
]
}
});
//App.js
Ext.application({
name: 'Sencha',
controllers: ['Main'],
views: ['container1', 'panel1'], //add all the view files here which you wants to call on any other panel so that the instance of it will be created.
stores: [],
models: [],
launch: function() {
Ext.Viewport.add({
xtype: 'container1'
});
}
});
This work for me and will give you the same output. Moreover, on cancel Button it will hide the panel Hope this will help you.
Thanks
i'um using a top toolbar and bootom toolbar into a panel like this:
var panel = new Ext.Panel({
fullscreen: true,
renderTo: 'pnlLogin',
layout: {
type: 'vbox',
align: 'left'
},
items:[
{
xtype: 'textfield',
flex: 1,
id: 'ioUser',
label: 'User'
},
{
xtype: 'textfield',
flex: 1,
id: 'ioPwd',
inputType: 'password',
label: 'Password'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Restricted Area'
},
{
dock : 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm-round',
handler: function(b,e){
btnLoginClick();
}
}
]
}
]
});
the problem is BOTTOM TOOLBAR not appears!!
it appears only after i move my tablet!!
how can i solve it?
i need that it appears after panel render!
thanks!
Where is btnLoginClick(); method ?
if the file which cantent this method is load after this panel then this problem may happens...