We Keep Coding

Make Title Selectable

I have the following code in which I want to make the title as selectable. As it is a header the .x-selectable class is getting added.
The code is as follows
Ext.create('Ext.grid.Panel', {
renderTo: document.body,
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email',
hidden: true
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
});
Is there any work around for this issue ?

You can use selectable()
selectable( ) : Ext.Element
Enable text selection for this element
(normalized across browsers)
You need need to get your grid title header element & need to call this function.
Like this:
<yourGrid>.getHeader().el.selectable();
Can be done in afterrender listener of grid:
listeners: {
afterrender: function(grid){
grid.down('header').getHeader().selectable();
},
},
For EXTJS 3.3.1 we need to remove the selectStart listener applied by default by extjs using removeAllListeners():
listeners: {
afterrender: function(panel){
panel.header.removeAllListeners();
}
}

Scrolling and resizing with ExtJs

I have a problem with ExtJs sizes and scrolling. Here is a simple example: https://fiddle.sencha.com/#fiddle/ucd
Ext.onReady(function() {
var win = new Ext.Window({
id: 'win',
layout: 'fit',
closable: true,
bodyPadding: 5,
renderTo: Ext.getBody(),
items: {
xtype: "form",
defaultAnchor: "100%",
items: [{
xtype: "panel",
layout: "fit",
overflowY: "scroll",
//overflowY: "auto",
layout: 'hbox',
items: [{
xtype: "fieldset",
margin: 5,
padding: 5,
labelWidth: 140,
defaultAnchor: "100%",
collapsible: true,
title: "groupbox",
items: [{
itemId: "SNAME",
xtype: "textfield",
margin: 5,
fieldLabel: "Name:",
}],
}],
}]
}
});
win.show();
});
Problem:
It's a side issue. I don't understand, why overflowY: 'auto' won't work. It works in my local project, and in this Fiddle scrolling behaves as hidden. May I be need to call doLayout() or something on resize event. So I did overflow: "scroll".
You can see that ExtJs doesn't leave place for the scrollbar and it cover the fieldset. Why? How resolve this?
In my local project overflow: 'auto' works. And scrollbars always appears, because innerct panel div have same size as body div panel. So scrolling behaves as on set overflow: 'scroll'. And fieldset right border is hidden by scroll.

You are way overnesting. You are putting a container in a container in a container and all with there own layout calculations. Besides that your dom (which is always expensive to render) is way to big, the layout manager of ExtJs is way to busy and I can't tell what is going wrong because all of this.
Take a look at this code. It has exactly the same result, is much cleaner and your dom is much smaller.
Ext.onReady(function() {
new Ext.form.Panel({
id: 'form',
closable: true,
floating: true,
bodyPadding: 10,
width: 500,
items: [{
xtype: "fieldset",
padding: 5,
labelWidth: 140,
layout: 'anchor',
defaults: {
xtype: "textfield",
anchor: '100%',
margin: 5
},
collapsible: true,
title: "groupbox",
items: [{
name: "SNAME",
fieldLabel: "Name:"
}]
}],
renderTo: Ext.getBody()
});
});

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?

Creating a window in extjs

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/

Ext JS tabpanel won't fit window size

Someone wants a panel done in Ext JS to dynamically fit the window size. I'm not familiar with Ext, but after hours of searching, I haven't found a working solution. Here is the code that is expected to be fixed:
var histotab = Ext.createWidget('tabpanel', {
activeTab: 0,
width : 2000,
height : "50%",
defaults :{
bodyPadding: 10
},
items: [
{
id: 'chartCmp',
title: 'By Year',
xtype: 'chart',
style: 'background:#fff',
layout:'fit',
animate: true,
shadow: true,
store:SOD.storeHistogram,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['countoffiles'],
label: {
font: '8px Arial'
},
Any suggestions are greatly appreciated.

Use the Ext.container.Viewport class with a fit layout. The viewport always sizes itself to the document view size.
Ext.widget('viewport', {
layout: 'fit',
items: {
xtype: 'tabpanel',
items: [{
title: 'Foo',
html: 'First tab'
}]
}
});