API文档地址 https://docs.sencha.com/extjs/6.6.0/modern/Ext.html
下载库文件 https://www.sencha.com/
build：压缩后的Ext全部源码（里面分类存放） ext.js：核心文件，其中包含运行应用程序的所有功能。 ext-all.js：此文件包含在文件中没有注释的所有压缩的代码。 ext-all-debug.js：这是ext-all.js的未分级版本，用于调试目的。 ext-all-dev.js：此文件也未分级，用于开发目的，因为它包含所有注释和控制台日志，以检查任何错误/问题。 ext-all.js：这个文件用于生产目的，主要是因为它比任何其他小得多。 resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里。
classic：如果我们要使用桌面应用程序，那么我们可以使用classic下的经典主题。 locale： 国际化文件 （locale-zh_CN.js：简体） theme-triton：主题，扁平化、响应式
examples：提供使用ExtJs技术做出的小实例。
modern：如果我们要使用移动应用程序，那么我们将使用现代主题modern。
实践
一、手打编写，了解下Ext
1、弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Extjs样式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
<!--引入extjs核心库-->
<script src="ext/ext-all.js"></script>
<script>
// alert("hello")
//在extjs框架初始化完成才执行
Ext.onReady(function () {
Ext.MessageBox.alert("温馨提示","hello");
})
</script>
</head>
<body>
</body>
</html>2、面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Extjs样式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
<!--引入extjs核心库-->
<script src="ext/ext-all.js"></script>
<script>
Ext.onReady(function () {
//创建面板对象，第一种 通过new创建
var panel=new Ext.Panel({
width:300,
height:400,
title:'标题',
html:'hello',
//必须要进行渲染才会显示
renderTo:Ext.getBody()
})
//第二张 使用create方法来创建
Ext.create('Ext.Panel',{
width:300,
height:400,
title:'标题',
html:"world",
//必须要进行渲染才会显示
renderTo:'dd'
})
//第三种 使用Ext.create和xtype
var panel3=Ext.create({
xtype:'panel',
width:300,
height:400,
title:'标题',
html:'你好',
//监听 第一种方法
listeners:{
close:function () {
console.log("关闭。。。")
}
}
//必须要进行渲染才会显示
// renderTo:Ext.getBody()
})
//监听 第二种方法
panel3.on('close',function () {
console.log("关闭2.。。")
})
//监听 第三种方法
panel3.addListener('close',function () {
console.log("关闭3.。。")
})
//渲染延迟
panel3.render(Ext.getBody())
//查看拖拽属性
console.log(panel3.draggable);
//关闭
panel3.close();
})
</script>
</head>
<body>
<!--渲染位置-->
<div id="dd"></div>
</body>
</html>3、list数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入Extjs样式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="ext/css/icon.css">
<!--引入extjs核心库-->
<script src="ext/ext-all.js"></script>
<!--国际化文件-->
<script src="ext/classic/locale/locale-zh_CN.js"></script>
<script>
Ext.onReady(function () {
//创建一个store要使用的model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{name: 'username', type: 'string'},
{name: 'realname', type: 'string'},
{name: 'hiredate', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'state'}]
});
//创建数据源store
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
pageSize:'10',//每页显示10条，地址传参用
proxy: {
type: 'ajax',
url: 'json/list.json',
reader: {
type: 'json',
rootProperty: 'result'
}
},
autoLoad: true //自动加载数据
});
//创建gridpanel
Ext.create('Ext.grid.Panel',{
title:'用户管理',
iconCls:'user',//图标
height:700,
store:myStore,
forceFit:true,//列宽自适应
columnLines:true,//列框线
renderTo:Ext.getBody(),
tbar: [
{ xtype: 'button', text: '新增',iconCls:'add',border:false,handler:function(){} },
{ xtype: 'button', text: '修改',iconCls:'edit',border:false,handler:function(){} },
{ xtype: 'button', text: '删除',iconCls:'delete',border:false,handler:function(){} },
{ xtype: 'button', text: '刷新',iconCls:'reload',border:false,handler:function(){} },
],//顶部工具栏
bbar: { xtype:'pagingtoolbar',displayInfo:true,store:myStore},//底部{分页；显示隐藏信息；旧版本需要，展示右下角多少条}
columns:[
{ xtype:'rownumberer',width:30,align:'center'},
{ header:'用户名',dataIndex:'username'},
{ header:'真实姓名',dataIndex:'realname'},
{ header:'入职时间',dataIndex:'hiredate'},
{ header:'电话',dataIndex:'phone'},
{ header:'状态',dataIndex:'state',renderer:function(value){//指定函数，把value值转换为可显示的内容
return value?"在职":"<font color='red'>离职</font>";
}}]
})
//创建formpanel
var formPanel = Ext.create('Ext.form.Panel', {
bodyPadding: 30,//外边距
// width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'json/result.json',
// 表单域Fields将被竖直排列，占满整个宽度
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
name: 'id',
hidden: true
},{
fieldLabel: '用户名',
name: 'username',
allowBlank: false //不允许为空
},{
fieldLabel: '真实姓名',
name: 'realname'
},{
fieldLabel: '入职时间',
name: 'hiredate',
xtype: 'datefield',
format:'Y-m-d'
},{
fieldLabel: '电话',
name: 'phone'
},{
fieldLabel: '状态',
name: 'state',
xtype: 'combobox',
store: new Ext.data.ArrayStore({
fields : ['value','text'],
data : [[true,'在职'],[false,'离职']]
}),
valueField:'value',
displayField:'text'
}],
// Reset and Submit buttons
buttons: [{
text: '重置',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: '保存',
formBind: true, //当表单验证成功，按钮启用
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('提示', "保存成功");
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}]
});
//表单弹出框
var add=Ext.create('Ext.window.Window', {
title: '新增用户',
height: 350,
width: 350,
layout: 'fit',
items: formPanel
}).show();
})
</script>
</head>
<body>
</body>
</html>二、上面都是手打的，认识一下Ext，下面开始使用cmd生成项目。
这个是找的网上的，下面我使用公司人提供的方法。
1、sencha -sdk /G:\extjs6\ext-6.6.0 generate app MyApp /G:\Extjs6\Project 绿色：extjs6 解压的位置 蓝色：项目名 红色：项目生成的位置 生成的是一个空白模板
2(1)、推荐使用根据模板生成项目：(推荐我用这个) sencha -sdk G:\extjs6\ext-6.6.0 generate app -s G:\extjs6\ext-6.6.0\templates\admin-dashboard Admin /G:\ext6
2(2)、根据模板生成项目后，修改app.json配置 （1）找到output配置项 修改base值"${ext.dir}/build/examples/admin-dashboard/${build.id}"改为"${workspace.build.dir}/${build.environment}/${app.name}/${build.id}"
（2）引入中文语言包：找到"requires"配置 改为"requires" : ["charts", "font-awesome", "ux", "locale"], "locale": "zh_CN",
3、进入项目目录 执行 sencha app build。
4、查看。 执行sencha app watch ，浏览器输入localhost:1841访问
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
