Ext.js 4 部分内容
-
使用方法
下载后直接将Ext.js文件夹引入项目表现层目录中
-
命名约定
名称 命名约定 类名 大写开头，驼峰 方法名 小写开头，驼峰 变量名 小写开头，驼峰 常量名 全部大写 属性名 小写开头，驼峰 创建一个类
Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] }); -
基础
Ext.onReady()方法将在Ext JS准备好渲染Ext JS:元素时调用。
Et.create()方法用于在Ext JS中创建对象，这里我们创建一个简单的面板类Ext.Pane的对象。
Ext.Panel是Ext JS中用于创建面板的预定义类。
每个Ext JS类都有不同的属性来执行一些基本的功能。Ext.Panel类有以下各种属性：
renderTo是此面板必须星现的元素。
Height和宽度属性用于提供面板的自定义尺寸。
Title属性是为面板提供标题。
Html属性是要在面板中显示的html内容。 -
容器
EtJS中的容器是我们可以添加其他容器或子组件的组件。
这些容器可以具有多个布局以将部件布置在容器中。
我们可以从容器和其子元素添加或删除组件。
EXt.container.Container是Ext JS中所有容器的基类。容器中放组件
var component1 = Ext.create('Ext.Component', { html:'First Component' }); Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), items: [component1] });容器中放容器
var component1 = Ext.create('Ext.Component', { html:'First Component' }); Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), items: [component1] });常用容器类型
// Ext.panel.Panel //普通的容器 Ext.create('Ext.panel.Panel', { items: [child1, child2] // this way we can add differnt child elements to the //container as container items. });// Ext.form.Panel // 表单容器，提供有表单相关功能 Ext.create('Ext.form.Panel', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });//Ext.tab.Panel //包含多个选项卡的容器 Ext.create('Ext.tab.Panel', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });//Ext.container.Viewport //顶级应用容器，可以根据实际窗口大小自动调整 Ext.create('Ext.container.Viewport', { items: [child1, child2] // 这样我们可以将不同的子元素作为容器项添加到容器中。 });
5.容器布局
| 名称 | 作用 |
|---|---|
| 绝对定位 absolute | 允许使用坐标进行定位 |
| 手风琴定位 accordion | 允许一个项目叠在另一个项目上，类似于折叠 |
| 锚点定位 Anchor | 可以根据父容器的大小，作为基准，来相对调节自身大小 |
| 边框布局 border | 将整个页面划分为五个区域（east, south, west, north, center），可以为容器内组件指定在哪个区域 |
| 自动布局 auto | 默认的布局方式，根据容器内元素大小自动布局,容器大小会根据组件大小调整 |
| card_panel布局 | 此布局允许使用容器中的XY坐标定位项目，定位tab中内容的位置 |
| card_wizard布局 | 向导，每次只显示一个组件，底部有导航按钮 |
| 列布局 column | 将容器的分成列显示 |
| 自适应布局 fit | 容器内组件没有要求时，会尽可能填充容器空间，容器空间是固定的 |
| 表格布局 table | 组件将会以表格形式排列，同时组件还有colspan/rowspan属性，可以设置占几行/几列 |
| vbox布局 | 此布局允许元素以垂直方式分布 |
| hbox布局 | 此布局允许元素以水平方式分布 |
6.组件
-
grad 网格
//定义一个类，name属性表示字段的名称，mapping属性表示与后端数据模型对应的字段名称 Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] }); Ext.onReady(function(){ // 数据 var myData = [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; //网格数据对象 var gridStore = Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: myData }); // 网格 Ext.create('Ext.grid.Panel', { id : 'gridId', //唯一标识 store : gridStore, stripeRows : true, //是否交替显示行背景色 title : 'Students Grid', // 网格名 renderTo :'gridDiv', // 显示的模块 width : 600, collapsible : true, // 是否支持折叠网格 enableColumnMove :true, //是否允许拖动列调整列位置 enableColumnResize:true, // 是否允许通过拖动调整列宽度 columns : //指定网格的列配置 [{ header: "Student Name", dataIndex: 'name', id : 'name', flex: 1, //使用弹性布局来定义该列占据的空间比例，值为1，表示将获得所有可用空间的一部分 sortable: true, // 允许对该列的数据进行排序 hideable: true // 允许用户在运行时隐藏该列 },{ header: "Age", dataIndex: 'age', flex: .5, sortable: true, hideable: false // this column will not be available to be hidden. },{ header: "Marks", dataIndex: 'marks', flex: .5, sortable: true, //通过renderer属性设置了一个渲染函数，根据列中的值进行条件判断并返回相应的结果。如果marks大于75，则显示为"Distinction"，否则显示为"Non Distinction" renderer : function (value, metadata, record, rowIndex, colIndex, store) { if (value > 75) { return "Distinction"; } else { return "Non Distinction"; } } }] }); }); -
表单
常见xType
类型 作用 文本域 Ext.Form.Field.Text 用户可以输入文本内容，和文本区域功能相同，但是属性不同 文本区域 Ext.form.field.TextArea 。。。。可以使用vtype配置项来添加自定义的验证类型 显示字段 Ext.form.Label 显示一段文字 日期字段 Ext.form.field.Date 日期选择，包含日期选择器 按钮 Ext.button.Button 按钮 单选按钮 Ext.form.field.Radio 在所有选项中单选 复选框checkbox Ext.form.field.Checkbox 在所有选项中复选 组合框 Ext.form.field.ComboBox 下拉框 时间字段 Ext.form.field.Time 进行时间选择 文件 Ext.form.field.File 文件上传 螺旋桨 Ext.form.field.Spinner 列表可以旋转选择 NUMERIC FIELD Ext.form.field.Number 数字，可以限制范围 隐藏字段 在页面上隐藏的字段，可以用来存储传递敏感数据 -
消息框
类型 效果 基本警报框 Ext.Msg.alert(‘Title’, ‘Basic message box in ExtJS’); 最为基本的消息提示框，只显示消息内容 确认框 Ext.MessageBox.confirm(‘Confirm’, Msg, optional callbackFunction()); 可以根据用户选择（yes/no）做出相应选择 提示框 Ext.Msg.prompt(‘Name’, ‘Please enter your name:’, function(){}); 用户可以输入，可以对用户输入文本进行处理 多行输入框 Ext.MessageBox.show({ title: ‘Details’, msg: ‘Please enter your details:’, width:300, buttons: Ext.MessageBox.OKCANCEL, multiline: true, // this property is for multiline user input. fn: callbackFunction }); //fn为自动执行回调函数，不需要传参，会自动传递所需参数 类似于提示框，但是允许多行输入 是否取消框 同多行输入框 不同点buttons: Ext.MessageBox.YESNOCANCEL 类似于确认框，根据用户选择回调函数进行处理 -
图表 依赖‘./ext-6.0.0/build/packages/charts/classic/charts.js’
类型 效果 饼图 Ext.chart.PolarChart
Ext.create(‘Ext.chart.PolarChart’, {
renderTo: document.body, // 将图表渲染到当前页面的 body 元素中
width: 600, // 图表宽度为 600 像素
height: 300, // 图表高度为 300 像素
store: { // 图表数据源
fields: [‘name’, ‘g1’], // 数据源字段定义，包括 name 和 g1 两个字段
data: [ // 图表数据
{“name”: “Item-0”, “g1”: 57},
{“name”: “Item-1”, “g1”: 45},
{“name”: “Item-2”, “g1”: 67}
] }, // 配置图例（legend）
legend: { docked: ‘bottom’ // 将图例显示在底部 }, // 描述实际的饼图系列（series）
series: [{ type: ‘pie’, // 使用饼图类型的系列
xField: ‘g1’, // 指定饼图的数值字段为 ‘g1’
label: { field: ‘name’ // 标签显示字段为 ‘name’ },
donut: 30 // 中间空白区域的大小，增加或减小该值可以改变中间空白区域的大小
}] });饼状图 折线图 Ext.chart.CartesianChart
Ext.create(‘Ext.chart.CartesianChart’, {
renderTo: document.body,
width: 600,
height: 200,
store: { //数据
fields: [‘name’, ‘g1’, ‘g2’], //字段
data: [ //数据
{“name”: “Item-0”, “g1”: 57, “g2”: 59},
{“name”: “Item-1”, “g1”: 45, “g2”: 50},
{“name”: “Item-2”, “g1”: 67, “g2”: 43},
{“name”: “Item-3”, “g1”: 45, “g2”: 18},
{“name”: “Item-4”, “g1”: 30, “g2”: 90}
] },
legend: { /图例
docked: ‘bottom’ }, //显示位置
axes: [{
type: ‘numeric’, //纵坐标
position: ‘left’ //位置
},
{ type: ‘category’, //横坐标
visibleRange: [0, 1],
position: ‘bottom’ }], //define the actual series
series: [{ //折线属性
type: ‘line’,
xField: ‘name’,
yField: ‘g1’,
title: ‘Normal’ },
{ type: ‘line’,
xField: ‘name’,
yField: ‘g2’,
title: ‘Smooth’ }]
});折线图 条形图 Ext.chart.CartesianChart
Ext.create(‘Ext.chart.CartesianChart’, {
renderTo: document.body,
width: 600,
height: 200,
flipXY: true, // X轴和Y轴互换
store: {
fields: [‘name’, ‘g1’, ‘g2’], // 定义数据模型字段
data: [
{“name”: “Item-0”, “g1”: 57, “g2”: 59},
{“name”: “Item-1”, “g1”: 45, “g2”: 50},
{“name”: “Item-2”, “g1”: 67, “g2”: 43},
{“name”: “Item-3”, “g1”: 45, “g2”: 18},
{“name”: “Item-4”, “g1”: 30, “g2”: 90}
]
}, //set legend configuration
legend: {
docked: ‘right’ //设置图例显示在右侧
}, //define the x and y-axis configuration.
axes: [{
type: ‘numeric’,
position: ‘bottom’, /位置
grid: true, //是否显示网格线
minimum: 0 //数值显示的最小值
}, {
type: ‘category’,
position: ‘left’
}],
series: [{
type: ‘bar’, //柱状图
xField: ‘name’,
yField: [‘g1’, ‘g2’],
axis: ‘left’
}]
});柱状图 区域图 Ext.chart.CartesianChart
Ext.create(‘Ext.chart.CartesianChart’, {
renderTo: document.body,
width: 600,
height: 200,
store: {
fields: [‘name’, ‘g1’, ‘g2’],
data: [
{“name”: “Item-0”, “g1”: 57, “g2”: 59},
{“name”: “Item-1”, “g1”: 45, “g2”: 50},
{“name”: “Item-2”, “g1”: 67, “g2”: 43},
{“name”: “Item-3”, “g1”: 45, “g2”: 18},
{“name”: “Item-4”, “g1”: 30, “g2”: 90}
]
},
legend: { //图例位置
docked: ‘right’
},
axes: [{
type: ‘numeric’,
position: ‘left’,
grid: true //显示网格
}, {
type: ‘category’,
position: ‘bottom’,
visibleRange: [0,5] //设置可见数据范围
}],
series: [{
type: ‘area’,
xField: ‘name’,
yField: [‘g1’, ‘g2’],
title: [‘G1’, ‘G2’]
}]
}); -
工具提示
当发生特定事件时触发小提示
T1 = new 'Ext.ToolTip'({properties}); -
窗口
渲染一个新的窗口
win = new Ext.Window({ properties }); -
HTML编辑器
Ext.create('Ext.form.HtmlEditor')类似于wrod文档还包括多媒体等
-
进度条
```javascript // 创建并配置一个按钮 var button = Ext.create('Ext.Button', { text: '点击开始', renderTo: Ext.getElementById('buttonId'), // 将按钮渲染到指定的 DOM 元素 handler: function() { // 点击按钮时执行的回调函数 // 显示一个带有进度条的对话框 Ext.MessageBox.show({ title: '进度', progress: true, // 启用进度条 closable: false // 禁止关闭对话框 });var progressBar = Ext.getCmp(‘progressbar’);
// 模拟进度的增加
var simulateProgress = function() {
var value = progressBar.getValue();// 更新进度条的进度
progressBar.updateProgress(value + 0.1, '正在处理任务 ’ + Math.round((value + 0.1) * 100) + ‘%’);if (value < 1) {
// 继续增加进度，直到达到100%
setTimeout(simulateProgress, 500); // 延迟时间可根据实际情况进行调整
} else {
// 进程完成，隐藏进度条对话框
Ext.MessageBox.hide();// 显示一个提示框，表示进程已成功完成 Ext.Msg.alert('完成', '任务已成功完成！');}
};// 开始进度模拟
simulateProgress();
}
});
7、拖放
8、主题
9、自定义事件、监听器
- 内置事件监听器
listeners: {
click: function() {
Ext.MessageBox.alert('Alert box', 'Button is clicked');
}
}
- 附加事件监听
var button = Ext.create('Ext.Button', {
renderTo: Ext.getElementById('helloWorldPanel'),
text: 'My Button'
});
// This way we can attach event to the button after the button is created.
button.on('click', function() {
Ext.MessageBox.alert('Alert box', 'Button is clicked');
});
- 自定义事件监听
var button = Ext.create('Ext.Button', {
renderTo: Ext.getElementById('helloWorldPanel'),
text: 'My Button',
listeners: {
myEvent: function(button) {
Ext.MessageBox.alert('Alert box', 'My custom event is called');
}
}
});
Ext.defer(function() { //延迟执行
button.fireEvent('myEvent'); //触发自定义事件
}, 5000);
10、数据
-
模型
创建一个模型
Ext.define('StudentDataModel', { extend: 'Ext.data.Model', fields: [ {name: 'name', mapping : 'name'}, {name: 'age', mapping : 'age'}, {name: 'marks', mapping : 'marks'} ] }); -
商店
//静态 Ext.create('Ext.data.Store', { model: 'StudentDataModel', data: [ { name : "Asha", age : "16", marks : "90" }, { name : "Vinit", age : "18", marks : "95" }, { name : "Anand", age : "20", marks : "68" }, { name : "Niharika", age : "21", marks : "86" }, { name : "Manali", age : "22", marks : "57" } ]; }); -
代理
//可以动态的获取数据 Ext.create('Ext.data.Store', { model: 'StudentDataModel', proxy : { type : 'rest', actionMethods : { read : 'POST' // Get or Post type based on requirement }, url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path which fetches data from database or Json file path where the data is stored reader: { type : 'json', // the type of data which is fetched is of JSON type root : 'data' }, } });
11、方法
//创建数据映射对象,//RU_DATE,RU_DETAIL,RU_FINSHER,RU_OA_ORDERID,RU_USER
Ext.define(‘RuRecordDataModel’, {
extend: ‘Ext.data.Model’,
fields: [
{ name: ‘RU_FINSHER’, mapping: ‘RU_FINSHER’ },
{ name: ‘RU_DETAIL’, mapping: ‘RU_DETAIL’ },
{ name: ‘RU_DATE’, mapping: ‘RU_DATE’ }
]
});
//创建网格对象
var gridStore = Ext.create(‘Ext.data.Store’, {
model: ‘RuRecordDataModel’,
data: rsp.ruRecord
});
var gridPanel = Ext.create('Ext.grid.Panel', {
store: gridStore,
stripeRows: true,
title: '上周系统更新记录',
width: 600,
collapsible: true,
enableColumnMove: true,
enableColumnResize: true,
columns: [{
header: "更新人员",
dataIndex: 'RU_FINSHER',
id: 'RU_FINSHER',
flex: 1,
sortable: true,
hideable: false
}, {
header: "更新内容",
dataIndex: 'RU_DETAIL',
flex: .5,
sortable: true,
hideable: false
}, {
header: "更新日期",
dataIndex: 'RU_DATE',
flex: .5,
sortable: true,
hideable: false
}]
});
var window = Ext.create('Ext.window.Window', {
title: '上周系统更新记录',
layout: 'fit',
modal: true,
items: [gridPanel]
});
window.show();
var ds = new Ext.data.JsonStore({
url: '../Post/MesBas/DevicePanel.aspx', root: 'data', totalProperty: 'totalCount',
fields: ['CUST_ID', 'DEVICE_ID', 'CUST_NAME', 'DEVICE_NO', 'FAB_DEVICE', 'CUST_DEVICE', 'SHIP_DEVICE', 'DEVICE_TYPE', 'TYPE_NAME', 'DEVICE_OWNER', 'OWNER_NAME', 'GROUP_NAME', 'PROCESS_ID', 'PROCESS_NAME', 'REMARK', 'STATUS', 'PROCESS_CP', 'CREATOR_NAME', 'REVISER_NAME', { name: 'CREA_DATE', type: 'date' }, { name: 'REVISE_DATE', type: 'date' }],
listeners: {
'beforeload': function () { this.baseParams = { start: 0, limit: Grid.getBottomToolbar().pageSize, DEVICE_NO:'', STATUS: 'Y', CUST_ID:'', TASK_IF: ''} }
}
});
//显示列
var cm = new Ext.grid.ColumnModel({
defaults: { align: 'center', width: 120 },
columns: [ { header: '客户名称', dataIndex: 'CUST_NAME' }, { header: '产品型号', width: 150, dataIndex: 'DEVICE_NO' },
{ header: '客户型号', dataIndex: 'CUST_DEVICE' }, { header: '晶圆型号', width: 150, dataIndex: 'FAB_DEVICE' },
]
});
var Grid = new MyGrid({
store: ds, cm: cm, iconCls: '', columnLines: true, trackMouseOver: false
});
new Ext.Window({
title: '产品选择', width: 500, height: 550, plain: true, iconCls: 'right', resizable: false, collapsible: true, closeAction: 'close', closeable: true, modal: true, layout: 'fit', buttonAlign: 'right',
items: Grid, buttons: [
{ text: '已查阅', iconCls: 'back', handler: function () { this.ownerCt.findParentByType('window').close(); } }],
listeners: { 'show': function (it) { ds.load(); } }
}).show();
添加元素
store.insert(index,newRecord),在指定位置添加一行新数据
stroe.add(newRecord),在尾部追加新记录
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
