Creating a window in extjs - javascript

I have this code:
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true
});
tb = Ext.getCmp('head-toolbar');
tb.add({
text: 'Export',
menu: Ext.create('Ext.menu.Menu', {
items: [
{
text: 'Export',
handler: function () {
var win = new innerWindow();
win.show();
}
}
]
})
});
It creates a dropdown that has a value called 'export'. I have managed to make it so that, when I click the 'Export', I get a window. For now this window is empty. What I have been looking for, and unable to find, is how to create a window that has some text inside, and some options (dropdown box), and labels etc.
More precisly, I want a window like the one I attached. I'm sure I can find examples on how to create this, but I just don't know what to search for. Searching on "Extjs window" and similar words, didnt bring me the help I'm looking for, nor looking at Senshas homepage (which normally has lots of brilliant examples).
Can someone help me out?
Thanks

In your code change
var win = new innerWindow();
to
var win = Ext.create('innerWindow');
Then just define your window with the form inside:
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age'
},{
xtype: 'textfield',
fieldLabel: 'Height',
name: 'height'
}],
fbar: [{
text: 'Submit',
formBind: true,
itemId: 'submit'
}]
}]
});
The documentation is here: form, textfield, combobox. Start reading the guides. You must read the docs to understand. ExtJs doc is well written.

Each ExtJS component has a property named items...
You should be adding the fields you want into the items property.
It would look something like this..
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true,
items:[
{
xtype:"textfield",
......
},{
xtype:"combobox",
store:myStore,
.......
}
]
});
You should check the docs of Window, it does have info about items, and it also does include examples.
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window
You should also include a layout for that window, for it to know how to arrange its items. Here's a link showing all types of layouts: http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
Also, I'm not sure about the new innerWindow, I'd rather use Ext.create('innerWindow') to create a new instance of a component you've defined.

Set Extjs Script
<script type='text/javascript' src='http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js'></script>
Set Extjs CSS
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
Set Code
<script type='text/javascript'>
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Windows',
closable: true,
closeAction: 'hide',
width: 350,
minWidth: 250,
height: 125,
animCollapse:false,
border: false,
modal: true,
layout: {
type: 'border',
padding: 5
},
items: [{
xtype: 'form',
items: [{
xtype : 'combo',
fieldLabel : 'Age',
width : 320,
store : [ '18', '19', '20' ]
},{
xtype : 'combo',
fieldLabel : 'Height',
width : 320,
store : [ '1', '2', '3' ]
},],
fbar: [{
text: 'Submit',
formBind: true,
itemId: 'submit'
}]
}]
}).show();
});
</script>
Similar you want http://jsfiddle.net/ba3wnwpo/

Related

ExtJS how to reference region panel in viewport

Hi I have a problem about extjs viewport. I created a button and tried to reference to east panel but It seems a wrong way to access panel. Chrome developer tools showed a message "Uncaught TypeError: Cannot read property 'get' of undefined"
I google this thread
but my code is still not work.
my viewport:
var viewport = Ext.define('Fiddle.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [{
// xtype: 'container',
// itemId: 'header',
region: 'north',
//html: '<h1 class="x-panel-header">Page Title</h1>',
border: false,
margin: '0 0 5 0',
items: [{
xtype: 'button',
text: 'collapse',
handler: function() {
var east = viewport.items.get('e');
if (!!east.collapsed) {
east.expand();
} else {
east.collapse();
}
}
}]
}, {
region: 'east',
title: 'east Panel',
itemId: 'e',
//collapsible: true,
//collapseMode: 'mini',
floatable: false,
html: 'Information goes here',
split: true,
placeholder:{
width:20,
items:[{
xtype:'button',
}]
}
}, {
region: 'center',
xtype: 'container',
layout: 'fit',
items: {
html: 'Center'
}
}]
})
Fiddle
Instead of viewport.items.get('e'), use down:
viewport.down('#e')
Update:
In your code sample, viewport is referencing the viewport class, not instance. To access the instance from the button clicked, use:
b.up('viewport').down('#e')
Full example: https://fiddle.sencha.com/#fiddle/rl2
Avoid using itemId's. Doesn't
b.up('viewport').down('container[region=east]');
do the trick?

Remove emptyText on focus

I am currently working with ExtJS. I have a textfield which has an emptyText set as a config.
"emptyText : 'Please enter'"
When I click on it, it doesn't disappear. Only if I enter something, it goes. Is there any way in which this can be done?
I don't really like this solution, but I've come up with this (viewable here):
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false, // requires a non-empty value,
emptyText: 'blah',
originalEmptyText: 'blah',
listeners: {
focus: function() {
this.emptyText = ' '; // if you set it to empty string, it doesn't work
this.applyEmptyText();
},
blur: function() {
this.emptyText = this.originalEmptyText;
this.applyEmptyText();
}
}
}]
});
}
});
It should work for xtype:'textfield'. Can you provide more details about your attempt?
I did not get any issue.
Here is the sample code.
var form = new Ext.form.FormPanel({
items: [{
name: 'Test',
xtype:'textfield',
emptyText:'Empty Text',
}]
});

How to use Ext.panel.Panel in sencha touch?

I am using phonegap and sencha touch to build android app.
I have sencha-touch-all.js and sencha-touch.css files included.
And I am using Ext.Carousel and it works nicely.I want to use panel as a overlay for Carousel .If i write new Ext.Panel it works. ButExt.panel.Panel is not working it says "TypeError:Ext.panel is undefined"
Any help??
my code is as follows::
var overlay = new Ext.panel.Panel({
overlay: true,
id:'myPanel',
width: 400,
height: 280,
left: 200,
top : 18,
style:'background-color:#00CC33' ,
cls:'my-panel',
fullscreen:true,
draggable : true,
resizable : true,
closable : true,
items: [
{
label: 'Name',
xtype: 'textfield',
name:'textField1'
},
{
label: 'Email',
xtype: 'emailfield',
name:'textField2'
},
{
label: 'Password',
xtype: 'passwordfield',
name:'textField3'
}
]
});
myCarousel.add(overlay);
instead of Ext.panel.panel if i use Ext.Panel it works. But i cant close that panle,which is not giving any close button. But i want my panel to be draggable,resizable and closable.
Is it necessary to use ext.js also along with sencha-touch-all.js??
Any help?
I got my answer thorgh this link : How to embed a custom close button in top right hand corner of a Ext.MessageBox Sencha Touch 2.0
Writing here :
var box = Ext.create('Ext.Panel',
{
id: 'message-box',
title: 'title',
message: 'message',
items: [
{
xtype: 'toolbar',
height: '40px',
docked: 'top',
items: [
{xtype: 'spacer'},
{xtype: 'button',
text: 'X',
ui: 'plain',
style: {padding: '5px'},
handler: function(){Ext.getCmp('message-box').hide();}
},
],
}
]
});
box.show();

ExtJs 4 - Resize form items on window resize

I am using ExtJs 4.0.7 and I have just got into a problem.
I want to resize the elements in the form(panel) when I resize the window which contains it(or them).
It's simple when you don't have columns and you are using an anchor layout, I know.
So far, my code looks like this:
initComponent: function ()
{
var me = this;
me.terminalImage = Ext.create('Ext.Img', {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
width: 50,
margin: '0 10 0 0'
});
me.nameField = Ext.create('Ext.form.Text', {
xtype: 'textfield',
name: 'defname',
fieldLabel: 'myFLabel',
allowBlank: false,
listeners: {
}
});
me.terminalTypeCmb = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: me.getTrans('lblTerminalType.Text', 'Type'),
parentRecord: me.parentRecord,
store: 'myStore',
queryMode: 'local',
name: 'typename',
width: 300,
valueField: 'deftype',
displayField: 'typename',
listeners: {
}
});
me.form = Ext.create('Ext.form.Panel', {
xtype: 'form',
autoScroll: true,
defaultType: 'textfield',
defaults: { layout: 'anchor', flex: 1},
padding: '10',
items: [{
xtype: 'container',
layout: 'hbox',
items: [
me.terminalImage,
{
items: [me.nameField, me.terminalTypeCmb]
}
]
}
]
});
Ext.apply(this,
{
defaults: {
},
defaultType: 'textfield',
items: [me.form]
});
if (me.parentRecord)
{
me.form.loadRecord(me.parentRecord);
}
this.callParent(arguments);
}
I wanted to get something like that:
My Image | My TextField (resizable width on window resize)
(fixed size) | My ComboBox (I know it is not resizable)
|
Right now, my textfield remains with a constant width on window resize. Thank you for your help.
you are almost there :)
just remove default flex :defaults: { layout: 'anchor', flex: 1}, // not sure if you need the layout.
and add flex:1 only to the TextField.
Having the other items with fixed with, will make the TextField take all the space left.

Reset does not work a form in Sencha Touch

All I want to do is when I click the reset button on my form it resets all fields. And I have tried everything but it does not seem to work. Here is the class that has the button in it:
App.views.HomeIndex = Ext.extend(Ext.form.FormPanel,{
floating: true,
scroll: 'vertical',
itemId: 'jobSearch',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [{
xtype: 'textfield',
itemId: 'keywords',
label: 'Keywords',
labelAlign: 'top',
labelWidth: '100%',
name: 'keywords'
},{
xtype: 'textfield',
label: 'Job Title',
itemId: 'jtitle',
labelAlign: 'top',
labelWidth: '100%',
name: 'jtitle'
},{
.... //more xtypes here
,
dockedItems: [{
xtype: 'toolbar',
itemId: 'toolbar',
dock: 'bottom',
height: '36',
items: [
{ xtype: 'button', text: 'Reset',itemId: 'resetBtn',
},
{ xtype: 'spacer'},
{ xtype: 'button', text: 'Submit',itemId:'submitBtn',ui: 'action',
}
]
}]
In my App.js I have the code to handle the reset method:
//this is one way I thought of doing it. But obviously it does not work. I have tried googling all over but couldnt find a solution.
this.homeView.query('#resetBtn')[0].setHandler(function(){
var form = this.el.up('.x-panel');
//form.down('.x-input-text[name=keywords]').setValue(' ');
form.query('#jobSearch').getComponent('keywords').reset();
});
});
Ext.reg('HomeIndex', App.views.HomeIndex);
Your form's ID is "jobSearch", the name is "keyboards". You're trying to combine both.
Try:
form.query('#jobSearch').reset();
or:
document.forms['keywords'].reset();
Try this. It's a bit more ExtJS like.
var form = Ext.ComponentQuery.query('#jobSearch .form')[0];
form.reset();

Categories