Javascript-форум - Вопрос чайника

Javascript-форум (https://javascript.ru/forum/)

- ExtJS (https://javascript.ru/forum/extjs/)

- - Вопрос чайника (https://javascript.ru/forum/extjs/19430-vopros-chajjnika.html)

Вопрос чайника

Наконец уговорил клиента заюзать Ext.js, так как пришло время разобраться. Сразу же столкнулся с непонятной проблемой.

html

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
			@import url("ext-4.0.2a/resources/css/ext-all.css");
			@import url("ext-4.0.2a/resources/css/ext-standard.css");
			@import url("css/style.css");
		</style>
		
		<script type="text/javascript" src="ext-4.0.2a/builds/ext-core.js"></script>
		<script type="text/javascript" src="ext-4.0.2a/ext-all.js"></script> 
		<script type="text/javascript" src="js/main.js"></script>
	</head>
	<body>
	</body>
</html>

main.js

Ext.onReady(function() {
	 var tabs = new Ext.createWidget('tabpanel', {
        renderTo: Ext.getBody(),
        width: 450,
        activeTab: 0,
        defaults :{
            bodyPadding: 10
        },
        items: [{
            contentEl:'script', 
            title: 'Short Text',
            closable: true
        },{
            contentEl:'markup', 
            title: 'Long Text'
        }]
    });
});

В хроме вылетает ошибка:
Uncaught TypeError: Cannot call method 'removeCls' of null

Так как я являюсь абсолютным новичком, догадаться в чем же дело, не получается.
Заранее благодарю за любую поддержку.

4 версия существенно отличается от 3
вот работающий код

Ext.onReady(function() {
          var tabs = new Ext.create('Ext.tab.Panel', {
             renderTo: Ext.getBody(),
             width: 450,
             activeTab: 0,
             defaults :{
                 bodyPadding: 10
             },
             items: [{
                
                 title: 'Short Text',
                 closable: true
             },{
                
                 title: 'Long Text'
             }]
         });
     });

а чтобы не выдавалась ошибка в твоем коде - просто в тело страницы добавь HTML элементы с id указанными в contentEl

Цитата:

Сообщение от ilshat

new Ext.create('Ext.tab.Panel'

Такой синтаксис обязателен в 4й версии?

Цитата:

Сообщение от ilshat

а чтобы не выдавалась ошибка в твоем коде - просто в тело страницы добавь HTML элементы с id указанными в contentEl

Я нахожу это очень странным. Разве нельзя другим способом добавить айдишник элементу с контентом (без говнокода конечно-же)?

contentEl отвечает только за то чтобы... ext импортировал содержимое html элемента в компонент экста.... и если он не находит элемент нтмл с указанным ид то экст генерит ошибку.... как то так))))

не обязателен.... но лучше придерживаться его....