O requer do ExtJS4 é um novo mecanismo, principalmente para implementar mecanismo de carregamento assíncrono. Desta forma, o arquivo js correspondente não será carregado a menos que o botão ou opção correspondente seja clicado, o que melhora a velocidade de carregamento e o tempo de espera do usuário.
O mecanismo require é implementado por meio de uma função Ext.Loader.setConfig para definir o diretório de mapeamento para pesquisa de arquivo e, em seguida, usar Ext.require para carregar o arquivo js correspondente quando for necessário.
A estrutura de armazenamento do arquivo é a seguinte:
A pasta ux está no mesmo diretório de lição2.htm e lição22.js, e o MyWin.js usado é armazenado na pasta ux.
O código em lição2.html é o seguinte:
Copie o código do código da seguinte forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>área de trabalho extjs4</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../extjs4/resources/css/ext-all.css" />
<script type="text/javascript" src="../../extjs4/bootstrap.js"></script>
<script type="text/javascript" src="lesson22.js"></script>
</head>
<corpo>
<button id="myButton" align="center">mostrar</button>
</body>
</html>
Neste trecho de código, o arquivo MyWin.js no diretório ux não é carregado, portanto, quando a página for carregada, o arquivo MyWin.js não será carregado ao mesmo tempo, mas será carregado novamente quando necessário. A necessidade aqui é atendida clicando no botão.
O conteúdo do arquivo lição22.js é o seguinte:
Copie o código do código da seguinte forma:
(função(){
Ext.Loader.setConfig({
enabled:true, //Ativa o modo de carregamento assíncrono
caminhos:{
myApp:'lesson2/ux' //Localização do arquivo de declaração
}
});
Ext.onReady(função(){
Ext.require('ux.MyWin',function(){
var mw = Ext.create('ux.MyWin',{
título:'meu teste'
});
Ext.get('meuBotão').on('clique',function(){
mw.show();
});
});
});
})();
O conteúdo do arquivo MyWin.js no diretório ux é o seguinte:
Copie o código do código da seguinte forma:
Ext.define('ux.MyWin',{
estender:'Ext.janela.Janela',
título:'inscreva-se',
largura: 400,
altura: 300
});
Nota: O nome do arquivo MyWin e o nome da função aqui devem ser iguais. Se forem diferentes, não será exibido.
No início, usei o método de escrita na segunda aula do vídeo de ensino do ExtJS4 no uspcat, mas o resultado que eu queria não apareceu. Pode ser um problema de versão, ou pode ser meu próprio problema ao modificá-lo. isso, posso usar o método require. Esta é uma nota para quem tem a mesma confusão.