I try to create treepicker but i can't done with that http://jsfiddle.net/UKFVd/
Here is my code
var Panel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
width: 300,
height: 100,
title: 'Filters',
items: [ {
xtype: 'treepicker',
name: 'list_id',
fieldLabel: 'Task List',
labelWidth: 60,
displayField: 'text',
store: store
}],
renderTo: Ext.getBody()
});
i check error is TypeError: k is undefined How to working with treepicker thanks
You need to include:
Ext.ux.TreePicker
if you have not.
The code in the fiddle you posted is perfectly fine, however, on the left side under External Resources, add the full URL path to TreePicker.js, and try again, and it will work.
Here is a working fiddle rev: http://jsfiddle.net/UKFVd/6/
Tree picker is not an out of box component that ships with extjs, you have to add it to your web page as an additional resource.
here is a page showing examples:
http://extjs.dariofilkovic.com/
Related
I have this form and I want to populate a new window when I click a given button. Anyone who can help?
I tried creating a new panel and attaching it to a constructor but this is not working. If a reference to solving this issue will be appreciated.
If you want to create a window you can simply use the Ext.window.Window.
And if you try to show an image you can use Ext.Image.
Here is an example:
Ext.create('Ext.window.Window', {
title: 'Hello',
itemId: 'window-image',
height: 500,
width: 350,
bodyPadding: 5,
layout: 'fit',
items: [{
xtype: 'image',
src: 'https://www.w3schools.com/tags/img_girl.jpg'
}]
}).show();
And here is a sencha fiddle: example
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
I have the strangest little problem that I cannot seem to solve. We are using the admin dashboard from Sencha and we define a datefield inside a form:
{
xtype: 'fieldcontainer',
defaultType: 'textfield',
width: '100%',
defaults: {
labelWidth: 100,
labelSeparator: '',
submitEmptyText: false,
margin: "3 10 0 10"
},
items:[
{
xtype: 'datefield',
fieldLabel: 'Geburtsdatum',
name: 'geburtstag',
format: 'd.m.Y'
},
{
fieldLabel: 'Alter',
editable: false,
name: 'alter'
},
{
xtype: 'combobox',
name: 'geschlecht',
fieldLabel: 'Geschlecht',
store: 'lookup.Geschlecht',
queryMode: 'remote',
displayField: 'text',
valueField: 'id',
editable: false
},
{
xtype: 'datefield',
fieldLabel: 'geworben am',
name: 'geworbenAm',
format: 'd.m.Y'
},
{
fieldLabel: 'geworben von',
name: 'geworbenVon'
},
{
fieldLabel: 'Ehrungen',
name: 'ehrungen'
}
]
}
Everything works fine with one exception: the background of the pop-up calendar is transparent: https://www.dropbox.com/s/eic6sua4y7m9n9w/Screenshot%202016-02-16%2009.00.51.png?dl=0
Any idea how to fix this? I'm not sure where to look to solve this :/
Thanks in advance!
If you use Sencha Cmd, the CSS is compiled from SASS sources every time you build your solution.
Since browsers cannot read sass sources, the uncompiled version of your ExtJS app still has to use the compiled version of your CSS.
The CSS is compiled by concatenating together and then compiling all SASS files where path and filename correspond to a ExtJS javascript source file that is required in your ExtJS project at the time of compilation.
If you require other builtin Ext javascript files afterwards, the JS is loaded dynamically, but the CSS for these is not readily available, but a recompile of your app will solve this.
I can't seem to be able to focus a field in a form in extjs 4.
The doc lists a focus function for Text field (inherited from Component) but it doesn't do anything in terms of focusing to the input field.
Here's a sample code from the docs
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false
}, {
xtype: 'textfield',
id:'email',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email'
}]
});
If I call Ext.getCmp('email').focus() nothing visible happens.
What's the correct way to focus a field in extjs 4?
Sometimes a simple workaround is to slightly defer the focus call in case it's a timing issue with other code or even with the UI thread allowing the focus to take place. E.g.:
Ext.defer(function(){
Ext.getCmp('email').focus();
}, 0);
There isn't anything wrong with your code. I've made a jsfiddle for it and it works fine. Are you wrapping code in and Ext.onReady()? Also what browser are you using?
Try this:
Ext.getCmp('email').focus(false, 20);
Rather than work around with a delay, look for what is getting focus instead. Look out for focusOnToFront property on the parent.
panel({}) and all its contents like grid, form and want to render that exact clone to another panel is there a way to do it..is it possible to do it with panel.getEl() or is there any other way...please help
The sra's answer is incorrect. Ext's cloneConfig does exactly what you want it to. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Component-method-cloneConfig
The following code renders two of the "same" panels to the body.
var panel = Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "HBoxLayout Panel",
layout: {
type: 'hbox',
align: 'stretch'
},
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'Inner Panel One',
flex: 2
},{
xtype: 'panel',
title: 'Inner Panel Two',
flex: 1
},{
xtype: 'panel',
title: 'Inner Panel Three',
flex: 1
}]
});
var clone = panel.cloneConfig();
I must admit that the old answer was not entirely correct. Cloning of Componments is available since ExtJS2 and can be done via cloneConfig(overrides) which is a instance-method.
This will return a clone of the current instance with the applied overrides (if set). A clean clone will require you to use correct configurations, meaning no instances are created within the config. Here are some information bout this For more details read the Sencha guides
Old answer (only valid if the components to clone configs contains instances instead of plain configurations)
No, there is no buildin way to do this. And you should not try it. Consider to wrap the panel in a function that returns a instance of it (a simple sort of factory).
Edit
Something like this:
Factory.Panel = function (config) {
var defaults = {
labelWidth: 80,
labelAlign: 'left',
layout: 'form',
width: 720,
autoHeight: true,
header: false,
bodyStyle: 'padding:10px 15px;'
};
var cfg = Ext.apply({}, config, defaults);
var cmp = new Panel(cfg);
return cmp;
}
You can add as much function params as you like. This would be a clean way to do it. You just can clone simple object like a record. Note that Factory is a Namespace!