extjs6.2初级内容

这篇文章针对的extjs6.2.0。关于extjs6.2.0你可以在网上找到下载。这个我就不说在哪下了，一找一大堆。下下来解压之后里面的内容大概是这个样子。

页面上引入extjs的css与js文件

<script type="text/javascript" src="../extjs/build/ext-all.js"></script>
<script type="text/javascript" src="../extjs/build/ext-all-debug.js"></script>
<script type="text/javascript" src="../extjs/ext-bootstrap.js"></script>
<script type="text/javascript" src="../extjs/build/classic/locale/locale-zh_CN.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<link rel="stylesheet" type="text/css" href="../extjs/build/classic/theme-crisp/resources/theme-crisp-all.css"/>
<link rel="stylesheet" type="text/css" href="../extjs/build/classic/theme-crisp/resources/theme-crisp-all.css"/>

下面就可以写extjs代码了

Ext.onReady(function(){
extjsAlert=function(){
Ext.MessageBox.alert("提示框","这是一个提示框",function(){
alert("提示框关闭了");
});
};
extjsPrompt=function(){
Ext.MessageBox.prompt("输入框","请输入您的姓名:",function(btn,txt){
Ext.MessageBox.alert("结果","你点击了"+btn+"按钮,<br>输入的内容为"+txt);
});
};
extjsCustom=function(){
var config={
title:"自定义对话框",
msg:"这是一个自定义对话框",
width:400,
multiline:true,//是否显示多行文本
closable:true,//是否显示关闭按钮
/**
* buttons:
* OK:只有‘确定’按钮
* CANCEL:只有‘取消’按钮
* OKCANCEL:有‘确定’和‘取消’按钮
* YESNO:有‘是’和‘否’按钮
* YESNOCANCEL:有‘是’、‘否’和‘取消’按钮
*/
buttons:Ext.MessageBox.YESNOCANCEL,
/**
* icons（图标取值如下）
* INFO:信息图标
* WARNING:警告图标
* QUESTION:询问图标
* ERROR:错误图标
*/
icon:Ext.MessageBox.QUESTION,
fn:function(btn,txt){
Ext.MessageBox.alert("结果","你点击了"+btn+"按钮，输入的值是:"+txt);
}
};
Ext.MessageBox.show(config);
};
extjsProgress = function(){
Ext.MessageBox.show({
title:'请等待',
msg:'正在加载项目...',
progressText:'正在初始化...',
width:300,
progress:true,//此属性证明这是一个进度条
closable:false
});
var f=function(v){
return function(){
if(v==12){
Ext.MessageBox.hide();
Ext.MessageBox.alert('完成','所有项目加载完成!');
}else{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成');
}
};
};
for(var i=1;i<13;i++){
setTimeout(f(i),i*500);
}
};
extjsAnimal=function(){
var config={
title:"飞出的消息框",
msg:"这是一个自定义对话框，飞出来",
width:400,
multiline:true,
closable:false,
buttons:Ext.MessageBox.YESNOCANCEL,
icon:Ext.MessageBox.QUESTION,
animEL:"fly"
};
Ext.MessageBox.show(config);
};
Ext.get("btn1").on("click",function(){
Ext.MessageBox.alert("点击","我被点击了");
});
Ext.get("btn2").on("click",function(){
var name=Ext.get("name").dom.value;
Ext.Msg.alert("你好","你好，"+name+",这是来自extjs的问候");
});
});

以上是js中的代码。下面看html代码

<input type="button" value="alert" οnclick="extjsAlert();">
<input type="button" value="alert" οnclick="extjsPrompt();">
<input type="button" value="extjsCustom" οnclick="extjsCustom();"><br/>
<h1>进度条</h1>
<input type="button" value="extjsProgress" οnclick="extjsProgress();">
<input type="button" value="extjsAnimal" οnclick="extjsAnimal();">
<input type="button" value="clickme" id="btn1">
<h2>界面与脚本分离</h2>
<input type="text" id="name">
<input type="button" id="btn2" value="问候">

好了，把这些代码复制到你的js与html中试试看吧。这只是最简单的extjs内容。