How to solve problem with error "Ext is not defined" in ExtJS ?

Solution based on : Ext 3.4 (it works 3.x branch for sure,but i  haven't use extjs 4 yet (for various reasons))

STORY:
New to Extjs ?
Did you start learning ExtJS and you create html file add ext-all.js and you thinkt job done, but ... you see error ...
Ext is not defined

You discover that ext-ALL.js is not ALL what you need do.You need add ext-base.js ...but right one.
You need   ext-base.js  from  /adapter/ext/ext-base.js  (it is in your unzipped extjs folder.) and you need make sure that is first... so ...

SOLUTION
add below line as first javascript source:
  <script type="text/javascript" src="ext/ext-base.js"></script>    
then
ext-all and other funky and juicy bites....

Look here for more details (how to setup your first html file correctly ):
http://www.sencha.com/learn/html-page-setup/

list of all xtype attribute in extjs (based on version 4.0.1)

Information is valid for version Extjs 4.0.x .

If you look for list of all list of all xtype attribute in extjs (based on version 3.x) look here:
http://pastorcmentarny.blogspot.com/2011/03/list-of-all-xtype-attribute-in-extjs.html 


You lazy bastard!
Instead of using Extjs documentation you using  google , bing  or other search engine to find answer .
Are you ?

Up to date version can be found here:
 http://docs.sencha.com/ext-js/4-0/#/api/Ext.Component 

Below is a  list that is copied from extjs documentation with all xtypes


xtype Class
------------- ------------------
button Ext.button.Button
buttongroup Ext.container.ButtonGroup
colorpalette Ext.picker.Color
component Ext.Component
container Ext.container.Container
cycle Ext.button.Cycle
dataview Ext.view.View
datepicker Ext.picker.Date
editor Ext.Editor
editorgrid Ext.grid.plugin.Editing
grid Ext.grid.Panel
multislider Ext.slider.Multi
panel Ext.panel.Panel
progress Ext.ProgressBar
slider Ext.slider.Single
spacer Ext.toolbar.Spacer
splitbutton Ext.button.Split
tabpanel Ext.tab.Panel
treepanel Ext.tree.Panel
viewport Ext.container.Viewport
window Ext.window.Window

Toolbar components
---------------------------------------
paging Ext.toolbar.Paging
toolbar Ext.toolbar.Toolbar
tbfill Ext.toolbar.Fill
tbitem Ext.toolbar.Item
tbseparator Ext.toolbar.Separator
tbspacer Ext.toolbar.Spacer
tbtext Ext.toolbar.TextItem

Menu components
---------------------------------------
menu Ext.menu.Menu
menucheckitem Ext.menu.CheckItem
menuitem Ext.menu.Item
menuseparator Ext.menu.Separator
menutextitem Ext.menu.Item

Form components
---------------------------------------
form Ext.form.Panel
checkbox Ext.form.field.Checkbox
combo Ext.form.field.ComboBox
datefield Ext.form.field.Date
displayfield Ext.form.field.Display
field Ext.form.field.Base
fieldset Ext.form.FieldSet
hidden Ext.form.field.Hidden
htmleditor Ext.form.field.HtmlEditor
label Ext.form.Label
numberfield Ext.form.field.Number
radio Ext.form.field.Radio
radiogroup Ext.form.RadioGroup
textarea Ext.form.field.TextArea
textfield Ext.form.field.Text
timefield Ext.form.field.Time
trigger Ext.form.field.Trigger

Chart components
---------------------------------------
chart Ext.chart.Chart
barchart Ext.chart.series.Bar
columnchart Ext.chart.series.Column
linechart Ext.chart.series.Line
piechart Ext.chart.series.Pie

How to solve problem with error xxx "is not a constructor" ?

Solution for Extjs 2.3.0 (but i think it work for all version from 2.x and above)

If you see an error that  Lollypop is not a constructor (in general that something is not a constructor) that should gives you a clue that  that the javascript file that  containing   Lollypop (in general, object)  has not been loaded for some amazing reason into your marvellous the page.

It can be 2 reason....
 a) in 99% you simple didn't include this javascript file into page at all
so you should include this file using <script> tag , for example
<script src="scripts/my-candies/Lollypop.js"></script>

b) in rare case you misspell something with names.

Problem solved.

How validation and submit button works in Extjs ?

As You know , users are naughty by nature ,so they are addicted from put illegal characters  and other evil stuff to field   incorrectly , because that give a user a amazing oportunity to call to call center (or in worst case your boss to you ) and shout on innocent victims (or you) about they terrific and spooky experience they had because they didn't read something, they fill some form incorrectly and now shit happens to them and they want refund or other repayment, because "users are brainless and stupid".
So... you decided to use validation in Ext.

You set restrictions and you add submit button and you expect that  Ext they care  of turn on/off submit button (if everything is ok / something is wrong), because you learned that Ext likes to take care of everything else.


So you run script and ....Boooo .... Extjs didn't take care .
You've done research and you discover then in order to make submit button work you need:
In form (when you put all configuration stuff) you set monitorValid : true
In submit button (when as above  you put all configuration stuff) you set  add formBind : true

and then when you check website your jaw hit the floor because your bloody submit button is still enabled and you wondering ... wtf ?

The reason why it isn't working for You is ... because  your button(s) are configured and located outside of the formPanel.

If you move your buttons inside the formPanel object, and set monitorValid:true and formBind : true options in proper place then you will discover that IT WORKS :).

Below you have simply example how to implement


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>ExtJS test zone.</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" /> <!-- you need provide path to ext's css -->
<script src="lib/extjs/adapter/ext/ext-base.js"></script> <!-- you need provide path to ext's base -->
<script src="lib/extjs/ext-all.js"></script> <!-- you need provide path to ext's main extjs javascript file -->


<script type="text/javascript">

Ext.onReady(function(){

var feeForWatchingPornAtWorkForm = new Ext.FormPanel({
renderTo: document.body,
labelWidth: 75,
url:'save-form.php', // useless and should be overridden
frame:true,
title: 'Fee For Watching Porn At Work Appication Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
monitorValid:true,
defaultType: 'textfield',
items: [{
fieldLabel: 'User Name',
name: 'userName',
allowBlank:false
},{
fieldLabel: 'Departament',
name: 'departament',
allowBlank:false
},{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
allowBlank:false
},{
xtype: 'textarea',
width: 250,
height: 100,
fieldLabel: 'Declaration',
emptyText: 'Yes, i promise i will not watch porn at work again.Yes i am delight that company will put my picture with text "I watched porn and i appoligize company for use work time for private pleasure" in staffroom!'
}
],
buttons: [{
text: 'Send',
formBind:true
},{
text: 'Cancel'
}]
});

});


</script>
</head>

<body>

</body>

</html>




Sources:
sencha forum link 1

What is JSON ?

When you learning javascript or framework for javascript, you quite often see JSON in example here JSON in example.
You notice that, they are used as provide data for specified example and you feel quite screwed up, because you have no f...idea about server(or you just have no passion to install server and config because in most cases they Server which you hate it).It means that, you cannot receive data from server so you cannot using another ready-made example and only what you cand is .... screaming ... and then you ask yourself. What is JSON anyway ??

(All below information are copied (and lightly modified) from www.json.org and i put this here in case if above site is down)

JSON is acronym of JavaScript Object Notation.
It is a data-interchange format.
It is a text format that is completely language independent.(Which means it can be used in many languages,not javascript only or even in project when you don't use javascript at all)

For example between javascript and Java.

JSON is built on two structures:
A collection of name/value pairs.(In languages representation of this can be object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. (In languages representation of this can be array, vector or list).

Example of JSON forms which i usually want to use

object
single item: { string : value }
many items: { string : value , string : value , (...) , string : value }

array
single item: [ value ]
many items: [ value , value , (...) , value ]

possible values : string number object array true false null

char
any-Unicode-character
control-character
\" quotation mark
\\ character \
\/ character /
\b backspace
\f formfeed
\n newline
\r carriage return
\t tab
\u 4 hexadecimal digits


If you want to know everything about JSON (it takes whole ... 30 minutes and is translated to many languages) then go to this page:
http://www.json.org/

I will add note soon about "how to modify exists example in extjs that needed data from server to example to contain data stored in Ext itself".

list of all xtype attribute in extjs (based on version 3.3.1)

You lazy bastard!
Instead of using Extjs documentation you using  google , bing  or other search engine to find answer .
Are you ?


Up to date version can be found here:
http://dev.sencha.com/deploy/dev/docs/source/Component.html#cfg-Ext.Component-xtype

Below is a  list that is copied from extjs documentation with all xtypes

xtype Class
------------- ------------------
box {Ext.BoxComponent}
button {Ext.Button}
buttongroup {Ext.ButtonGroup}
colorpalette {Ext.ColorPalette}
component {Ext.Component}
container {Ext.Container}
cycle {Ext.CycleButton}
dataview {Ext.DataView}
datepicker {Ext.DatePicker}
editor {Ext.Editor}
editorgrid {Ext.grid.EditorGridPanel}
flash {Ext.FlashComponent}
grid {Ext.grid.GridPanel}
listview {Ext.ListView}
multislider {Ext.slider.MultiSlider}
panel {Ext.Panel}
progress {Ext.ProgressBar}
propertygrid {Ext.grid.PropertyGrid}
slider {Ext.slider.SingleSlider}
spacer {Ext.Spacer}
splitbutton {Ext.SplitButton}
tabpanel {Ext.TabPanel}
treepanel {Ext.tree.TreePanel}
viewport {Ext.ViewPort}
window {Ext.Window}

Toolbar components
---------------------------------------
paging {Ext.PagingToolbar}
toolbar {Ext.Toolbar}
tbbutton {Ext.Toolbar.Button} (deprecated; use button)
tbfill {Ext.Toolbar.Fill}
tbitem {Ext.Toolbar.Item}
tbseparator {Ext.Toolbar.Separator}
tbspacer {Ext.Toolbar.Spacer}
tbsplit {Ext.Toolbar.SplitButton} (deprecated; use splitbutton)
tbtext {Ext.Toolbar.TextItem}

Menu components
---------------------------------------
menu {Ext.menu.Menu}
colormenu {Ext.menu.ColorMenu}
datemenu {Ext.menu.DateMenu}
menubaseitem {Ext.menu.BaseItem}
menucheckitem {Ext.menu.CheckItem}
menuitem {Ext.menu.Item}
menuseparator {Ext.menu.Separator}
menutextitem {Ext.menu.TextItem}

Form components
---------------------------------------
form {Ext.form.FormPanel}
checkbox {Ext.form.Checkbox}
checkboxgroup {Ext.form.CheckboxGroup}
combo {Ext.form.ComboBox}
compositefield {Ext.form.CompositeField}
datefield {Ext.form.DateField}
displayfield {Ext.form.DisplayField}
field {Ext.form.Field}
fieldset {Ext.form.FieldSet}
hidden {Ext.form.Hidden}
htmleditor {Ext.form.HtmlEditor}
label {Ext.form.Label}
numberfield {Ext.form.NumberField}
radio {Ext.form.Radio}
radiogroup {Ext.form.RadioGroup}
textarea {Ext.form.TextArea}
textfield {Ext.form.TextField}
timefield {Ext.form.TimeField}
trigger {Ext.form.TriggerField}

Chart components
---------------------------------------
chart {Ext.chart.Chart}
barchart {Ext.chart.BarChart}
cartesianchart {Ext.chart.CartesianChart}
columnchart {Ext.chart.ColumnChart}
linechart {Ext.chart.LineChart}
piechart {Ext.chart.PieChart}

Store xtypes
---------------------------------------
arraystore {Ext.data.ArrayStore}
directstore {Ext.data.DirectStore}
groupingstore {Ext.data.GroupingStore}
jsonstore {Ext.data.JsonStore}
simplestore {Ext.data.SimpleStore} (deprecated; use arraystore)
store {Ext.data.Store}
xmlstore {Ext.data.XmlStore}

why my first application doesn't work in Extjs?

Quite often you copied and pasted first example called "Hello World" and ....it doesn't work and you wondering ...
WHY?
AM I STUPID?
IS THIS EXAMPLE IS CRAP OR EVEN LANGUAGE/FRAMWORK IS CRAP??

the answer is ... every language/framework needs some default settings to be applied to be damn sure that everything works correctly.
So what you need for extjs ?

1. You need provide location for ext script 
2. You need provice location for ext css
3. You need create place where ext can be rendered
4. You usually need      Ext.onReady(function(){ (Bla bla bla)  }
5. Make sure that your javascript is turn on in your browser.
6. Use firebug or opera dragonfly, they will explain(or usually write nonsense message) what went wrong with your code 

 Below  you example of "Hello world" in Extjs


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>ExtJS test zone.</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" /> <!-- you need provide path to ext's css -->
<script src="lib/extjs/adapter/ext/ext-base.js"></script> <!-- you need provide path to ext's base -->
<script src="lib/extjs/ext-all.js"></script> <!-- you need provide path to ext's main extjs javascript file -->


<script type="text/javascript"> //each script should start from this tag with type specified

Ext.onReady(function(){

Ext.MessageBox.alert('This is my title', 'Hello world'); // each script should start from this tag with type specified

});


</script> <!-- each script should has end tag -->
</head>

<body>

</body>

</html>


This should solve 99% of your problems  :)
Good luck and enjoy view of most famous example in software developing :)

How to solve problem with "ct is null" in extjs

So you start your amazing journey with extjs and you implement another amazing panel and then
instead of  see you brand new shiny panel you see N O T H I N G .. so you panic,but you know that your firebug will tell you the clue

"ct is null"

Sounds great but .... it doesn't mean anything. is it ?
so you looking to code again again... everything looks perfect but result is the same

"ct is null"

"ct is null" 

"ct is null"  

and you get mad and smash sceen and ask WHY?

ct is null means that Ext would love to render  to place which you specified (like div or body) but it couldn't find it..

First! Be sure that your Ext has :

(for example panel)
(...)


renderTo: document.body,   

    or

renderTo:  DivID,


It means in your html file is missing:

•   <body></body> or 
•   <div id="DivID"> but BUT need be DAMN SURE that you have DivID specified in ext and div need contain attribute DivID  

Below you have example how to implement panel correctly , that will be displayed (instead of  seeing in firebug error "ct in null")

Example (Fail Date With Girl Information Form):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>ExtJS test zone.</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />  

<!-- REMINDER: use correct path to your ext-all.css -->
<script src="lib/extjs/adapter/ext/ext-base.js"></script> <!-- REMINDER: use correct path to your ext-base.js -->
<script src="lib/extjs/ext-all-debug.js"></script> <!-- REMINDER: use correct path to your ext-all-debug.js -->
<script>
Ext.onReady(function(){

var movie_form = new Ext.FormPanel({
renderTo: document.body, //<-- MAKE SURE YOU ADD WHERE YOU RENDER
frame: true,
title: 'Fail Date With Girl Information Form',
width: 350,
items: [{
xtype: 'textfield',
fieldLabel: 'Name of girl',
name: 'title',
allowBlank: false,
maskRe: /[a-z]/,
listeners: {
specialkey: function(f,e){
if (e.getKey() == e.ENTER) {
Ext.Msg.alert('Hello', 'World');
}
}}
},{
xtype: 'checkbox',
fieldLabel: 'Epic fail?',
name: 'is it crap?'
},{
xtype: 'htmleditor',
fieldLabel: 'Explanation of what went wrong this time:',
name: 'editor',
hideLabel: true,
height: 100,
anchor: '100%'
},{
xtype: 'datefield',
fieldLabel: 'Date of humiliation',
name: 'released',
disabledDays: [1,2,3,4,5]
}]
});
});
</script>
</head>

<body> <!-- MAKE SURE YOU ADDED DESTINATION PLACE LIKE BODY(OR DIV) WHERE EXT WILL RENDER AMAZING PANEL -->
</body>

</html>

Have fun !

How to change modify update css in Ext dynamically

In some rare case we need override some css rules for Ext in specific situation where css cannot be change,then ... what?
 Then you use one line of code.
Ext.util.CSS.updateRule(".x-grid3-row-alt","background-color","#00FF00");

and that's it.
However, remember that in general is bad practice to update css on the fly because all css rules should be stored css file.

Below you can find extract from extjs api (3.3.1 at time of writing this crap note) about update

updateRule( String/Array selector, String property, String value ) : Boolean
Updates a rule property

Parameters:
selector : String/Array
If it's an array it tries each selector until it finds one. Stops immediately once one is found.
property : String
The css property
value : String
The new value for the property

Returns:
Boolean
true If a rule was found and updated

www
sencha forum "regarding-Ext.util.CSS.updateRule"
extjs api (found in Class Ext.util.CSS)

Set allowBlank dynamically in extjs

What to do if you want  set allowBlank dynamically ?
 In function where your logic make decision you just write this line

myField.allowBlank = true;

and that's it.

If you function dosen't include update of display specific field then add follow line
myField.validateValue(myField.getValue());
that will force field to update
(in  some cases you needed in some cases you dont needed (then you see error that value is not defined))

In case if you  have defined field inside form and for any reason you have issues with access to it.
Then .. i have good and bad news for you

Bad news .... you need move your fields out from form (from form looks cool :) ) and put before form is defined Good news .... it makes code more readable and easier to maintain and reuse

this.myForm = new Ext.form.FormPanel({
 ... settings like defaultType: 'textfield', and etc. ...
items: [
   this.myField,
   this.optionCombo,
]
});

Source: www.extensions.extjs.com