学习路线7.7-7.30
javascript----DOM-----CSS-----Ajax----ExtJs-----Sencha Architect
一.首页
使用border布局
右上角显示时间
APP的launch函数：
launch: function() {
Ext.create('MyApp10.view.MyViewport');
var myTime={
run:function(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var date1=date.getDate();
var weekday=date.getDay()-1;
var h=date.getHours();
var m=date.getMinutes();
var s=date.getSeconds();
if(m<10) m='0'+m;
if(s<10) s='0'+s;
Ext.getCmp('time_pan').body.update('<div align="center" style="padding-right:50px;padding-top:10px;width:100%;height:100%;background-color:white;color:#3399FF">'+year+'年'+month+'月'+date1+'日'+'<br />'+h+':'+m+':'+s+'</div>');
},
interval:1000
};
Ext.TaskManager.start(myTime);
}west：
panel里加个treepanel。
{
xtype: 'treepanel',
id: 'mytree',
collapsed: false,
store: 'MyTreeStore',
viewConfig: {
autoShow: true,
rootVisible: false,
listeners: {
itemclick: {
fn: me.onViewItemClick,
scope: me
},<span style="white-space:pre"> </span>//添加右键菜单
itemcontextmenu: {
fn: me.onViewItemContextMenu,
scope: me
}
}
}
}MyTreeStore加载一个Json文件：
Ext.define('MyApp10.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.Field'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyTreeStore',
proxy: {
type: 'ajax',
url: 'data/treepanel.json',
reader: {
type: 'json'
}
},
fields: [
{
name: 'text'
},
{
name: 'id'
}
]
}, cfg)]);
}
});json数据：
添加toolbar，“展开”、“收起”两个按钮
展开按钮的单击事件：Ext.getCmp('mytree').expandAll();收起按钮单击事件：
Ext.getCmp('mytree').collapseAll();tree右键菜单
为TREE添加右键单击事件：
onViewItemContextMenu: function(dataview, record, item, index, e, eOpts) {
var me=this;
e.preventDefault();
e.stopEvent();
if(record.raw.id=="01"||record.raw.id=="02"){
var array=[{
text:'添加',
handler:function(){
Ext.MessageBox.prompt("添加节点","请输入标题",function(btn,text){
if(btn=="ok"){//插入节点
record.appendChild({text:text,
leaf:true});
}
});<span style="font-family: Arial, Helvetica, sans-serif;"> </span> }
}];<span style="white-space:pre"> </span>//声明菜单
var nodemenu=new Ext.menu.Menu({
items:array
});
<span style="white-space:pre"> </span>//显示菜单
nodemenu.showAt(e.getXY());
}
else if(record.raw.id!="00"&&record.raw.id!="03"&&record.raw.id!="04"){
var array=[{
text:'删除',
handler:function(){
record.remove();
NyTreeStore.sync();
}
}];
var nodemenu=new Ext.menu.Menu({
items:array
});
nodemenu.showAt(e.getXY());
}
}
tree菜单单击事件
大体就是单击菜单右侧注入iframe或显示新的PANEL或弹出窗口
<pre name="code" class="javascript">onViewItemClick: function(dataview, record, item, index, e, eOpts) {
Ext.getCmp('center').removeAll();
switch(record.raw.id)
{
case '00':
Ext.getCmp('center').body.update('<div align="center"><img src="data/welcome.gif" width="400" height="400"><p><font face=Aharoni color=#3399FF size=5>welcome！</font></p></div>');
Ext.getCmp('bottom').body.update('<div align="center"><br />welcome!<br />左侧树菜单，从tree.json加载菜单内容</div>');
break;
case '01':
break;
case '01-01':
Ext.getCmp('center').body.update('<iframe src="http://www.baidu.com" width=100% height=100%></iframe>');
Ext.getCmp('bottom').body.update('<div align="center"><br />右侧显示百度链接</div>');
break;
case '01-02':
Ext.getCmp('center').body.update('<iframe src="http://www.sina.com.cn" width=100% height=100%></iframe>');
Ext.getCmp('bottom').body.update('<div align="center"><br />右侧显示新浪链接</div>');
break;
case '01-03':
Ext.getCmp('center').body.update('<iframe src="http://www.163.com" width=100% height=100%></iframe>');
Ext.getCmp('bottom').body.update('<div align="center"><br />右侧显示网易链接</div>');
break;
case '02-01':
Ext.getCmp('center').body.update('<iframe src="data/clock.html" width=100% height=100%></iframe>');
Ext.getCmp('bottom').body.update('<div align="center">数字时钟<br />加载本地时间并显示，点击“校准”与服务器时间进行校准并显示。<br />使用Ajax技术获取服务器时间:请求服务器返回一个日期字符串，在本地处理显示</div>');
break;
case '02-02':
Ext.getCmp('center').body.update('<iframe src="data/MyApp3/index.html" width=100% height=100%></iframe>');
Ext.getCmp('bottom').body.update('<div align="center"><br />一次数据绑定的练习。<br />将JSON数据显示在GRID中，点击选择表格中的数据可显示详细信息<br /></div>');
break;
case '02-03':
Ext.getCmp('center').body.update('<iframe src="data/Intern.htm" width=100% height=100%></iframe>');
Ext.getCmp('bottom').body.update('<div align="center"><br />EXTJS代码练习<br />纯代码编写,左侧树菜单，右侧显示链接</div>');
break;
case '02-04':
Ext.getCmp('center').add(Ext.widget("mytab"));
Ext.getCmp('bottom').body.update('<div align="center"><br />grid练习<br />grid从json读取数据，实现增加、编辑、删除、刷新的操作</div>');
break;
case '02-05':
Ext.getCmp('center').add(Ext.widget("tabdemo"));
Ext.getCmp('bottom').body.update('<div align="center"><br />tabpanel练习<br />tabpanel练习，增加、删除操作</div>');
break;
case '03':
Ext.widget("About").show();
break;
case '04':
Ext.widget("advice").show();
break;
}
},菜单一：Websites
Grid 增加 删除 编辑 刷新
gridpanel
items: [
{
xtype: 'gridpanel',
height: 470,
id: 'mygrid',
margin: 5,
bodyBorder: false,
columnLines: false,
deferRowRender: false,
forceFit: true,
store: 'tabStore',<span style="white-space:pre"> </span>//添加复选框
selModel: Ext.create('Ext.selection.CheckboxModel', {
}),
columns: [
{
xtype: 'gridcolumn',
width: 155,
dataIndex: 'img',
text: 'Img'
},
{
xtype: 'gridcolumn',
dataIndex: 'manufacturer',
text: 'Manufacturer',
editor: {
xtype: 'combobox',
store: 'MyJsonStore2'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'model',
text: 'Model',
tooltip: '双击可修改',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'price',
text: 'Price',
tooltip: '双击可修改',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
width: 169,
dataIndex: 'wiki',
text: 'Wiki'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return " <button class='edit'>Edit</button> <button class='delete'>Delete</button> ";
},
width: 108,
align: 'center',
text: 'Operating'
}
],
listeners: {
cellclick: {
fn: me.onMygridCellClick,
scope: me
}
},
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 10
})
]
}
]
},grid删除记录
onButtonClick: function(button, e, eOpts) {
//var aa;
var record=Ext.getCmp('mygrid').getSelectionModel().getSelection();
//for(var i=0;i<record.length;i++){
// aa+=record[i].get("img");
//}
Ext.getCmp('mygrid').store.remove(record);
},grid刷新
onButtonClick1: function(button, e, eOpts) {
Ext.getCmp('mygrid').store.reload();
},grid添加记录
onButtonClick2: function(button, e, eOpts) {
Ext.widget("addgridwin").show();
},弹出添加记录的窗口：
窗口代码：
Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
x: 50,
y: 70,
id: 'img',
width: 340,
fieldLabel: 'IMG'
},
{
xtype: 'textfield',
x: 50,
y: 170,
id: 'model',
width: 340,
fieldLabel: 'Model'
},
{
xtype: 'numberfield',
x: 50,
y: 220,
id: 'price',
width: 340,
fieldLabel: 'Price'
},
{
xtype: 'textfield',
x: 50,
y: 280,
id: 'wiki',
width: 340,
fieldLabel: 'Wiki'
},
{
xtype: 'button',
x: 70,
y: 390,
height: 30,
width: 100,
text: 'Add',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
},
{
xtype: 'button',
x: 290,
y: 390,
height: 30,
width: 100,
text: 'Cancel',
listeners: {
click: {
fn: me.onButtonClick1,
scope: me
}
}
},
{
xtype: 'combobox',
x: 50,
y: 120,
id: 'manu',
width: 340,
fieldLabel: 'Mnufacture',
store: 'MyJsonStore2'
}
]
});
me.callParent(arguments);
}, onButtonClick: function(button, e, eOpts) {
var img;
img=Ext.getCmp('img').getValue();
var manufacturer;
manufacturer=Ext.getCmp('manu').value;
var model;
model=Ext.getCmp('model').getValue();
var price;
price=Ext.getCmp('price').getValue();
var wiki;
wiki=Ext.getCmp('wiki').getValue();
<span style="white-space:pre"> </span>//插入记录
Ext.getCmp('mygrid').store.insert(0,[{img:img,manufacturer:manufacturer,model:model,price:price,wiki:wiki}]);
Ext.getCmp('addgridwin').close();
},
添加之后：
grid按钮列及编辑操作
grid按钮列
正常方式是添加 actioncolumn列，这里采用另一种方法
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return " <button class='edit'>Edit</button> <button class='delete'>Delete</button> ";
},
width: 108,
align: 'center',
text: 'Operating'
}gird编辑操作：
给要编辑的列添加editor:
{
xtype: 'gridcolumn',
dataIndex: 'manufacturer',
text: 'Manufacturer',
editor: {
xtype: 'combobox',
store: 'MyJsonStore2'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'model',
text: 'Model',
tooltip: '双击可修改',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'price',
text: 'Price',
tooltip: '双击可修改',
editor: {
xtype: 'textfield'
}
},为grid添加plugins
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 10
})
]
为grid添加cellclick事件
onMygridCellClick: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
var edit=e.getTarget('.edit');
if(edit)
{
Ext.getCmp('mygrid').editingPlugin.startEdit(rowIndex,cellIndex);
}
var del=e.getTarget('.delete');
if(del)
{
Ext.getCmp('mygrid').store.remove(record);
}
}tabpanel 添加tab页 删除当前页
Tabpanel
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
region: 'center',
id: 'mytabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
html: 'this is tab1',
bodyBorder: false,
collapsed: false,
collapsible: false,
title: 'Tab 1',
titleCollapse: false
},
{
xtype: 'panel',
html: 'this is tab2',
title: 'Tab 2'
},
{
xtype: 'panel',
html: 'this is tab3',
title: 'Tab 3'
}
]
},
{
xtype: 'panel',
margins: '0 0 0 10',
region: 'east',
width: 119,
layout: 'absolute',
items: [
{
xtype: 'button',
x: 15,
y: 50,
height: 30,
width: 90,
text: '添加Tab页',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
},
{
xtype: 'button',
x: 15,
y: 100,
height: 30,
width: 90,
text: '删除当前页',
listeners: {
click: {
fn: me.onButtonClick1,
scope: me
}
}
},
{
xtype: 'button',
x: 15,
y: 150,
height: 30,
width: 90,
text: 'MyButton'
}
]
}
]
});
me.callParent(arguments);
},添加Tab页
onButtonClick: function(button, e, eOpts) {
Ext.widget('addtab').show();
},
Ext.applyIf(me, {
items: [
{
xtype: 'fieldset',
x: 20,
y: 20,
height: 140,
width: 370,
layout: 'absolute',
title: 'Config',
items: [
{
xtype: 'textfield',
anchor: '100%',
x: 0,
y: 20,
id: 'title',
fieldLabel: 'Title',
emptyText: 'title'
},
{
xtype: 'radiogroup',
x: 0,
y: 50,
id: 'clsb',
width: 370,
fieldLabel: 'Closable',
items: [
{
xtype: 'radiofield',
name: 'cc',
boxLabel: 'True'
},
{
xtype: 'radiofield',
name: 'cc',
boxLabel: 'False',
checked: true
}
]
}
]
},
{
xtype: 'textareafield',
x: 20,
y: 180,
height: 183,
id: 'html',
width: 370,
fieldLabel: 'Html'
},
{
xtype: 'button',
x: 61,
y: 431,
width: 90,
text: '添加',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
},
{
xtype: 'button',
x: 270,
y: 430,
width: 90,
text: '取消',
listeners: {
click: {
fn: me.onButtonClick1,
scope: me
}
}
}
]
});
me.callParent(arguments);
},onButtonClick: function(button, e, eOpts) {
var title;
title=Ext.getCmp('title').value;
var clsb;
if(Ext.getCmp('clsb').getChecked()[0].boxLabel=="True")
{
clsb=true;
}
var html;
html=Ext.getCmp('html').getValue();
Ext.getCmp('mytabpanel').add({id:title,title:title,closable:clsb,html:html});
Ext.getCmp('mytabpanel').setActiveTab(title);
this.close();
}, onButtonClick1: function(button, e, eOpts) {
Ext.getCmp('mytabpanel').remove(Ext.getCmp('mytabpanel').getActiveTab());
}Form练习
窗口：
Ext.applyIf(me, {
items: [
{
xtype: 'fieldset',
x: 40,
y: 10,
height: 90,
id: 'ad1',
width: 390,
title: '个人信息',
items: [
{
xtype: 'radiogroup',
id: 'radio',
fieldLabel: '性别',
allowBlank: false,
items: [
{
xtype: 'radiofield',
id: 'radio1',
name: 'r1',
boxLabel: '男',
checked: true,
inputValue: '1'
},
{
xtype: 'radiofield',
id: 'radio2',
name: 'r1',
boxLabel: '女',
inputValue: '2'
}
]
},
{
xtype: 'datefield',
anchor: '100%',
id: 'birth',
fieldLabel: '出生日期',
allowBlank: false
}
]
},
{
xtype: 'textareafield',
x: 20,
y: 320,
height: 83,
id: 'ad-textarea',
width: 410,
fieldLabel: '您的建议',
allowBlank: false,
blankText: '不能为空',
emptyText: 'Your advice here'
},
{
xtype: 'fieldset',
x: 40,
y: 120,
height: 60,
width: 390,
title: '反馈类型',
items: [
{
xtype: 'checkboxgroup',
id: 'mycheckbox',
fieldLabel: '',
allowBlank: false,
items: [
{
xtype: 'checkboxfield',
boxLabel: '外观'
},
{
xtype: 'checkboxfield',
boxLabel: '技术'
},
{
xtype: 'checkboxfield',
boxLabel: '其他'
}
]
}
]
},
{
xtype: 'button',
x: 90,
y: 440,
width: 90,
text: '提交',
listeners: {
click: {
fn: me.onButtonClick1,
scope: me
}
}
},
{
xtype: 'button',
x: 290,
y: 440,
width: 90,
text: '取消',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
},
{
xtype: 'fieldset',
x: 40,
y: 200,
height: 100,
width: 390,
collapsed: true,
collapsible: true,
title: '选填',
items: [
{
xtype: 'combobox',
anchor: '100%',
id: 'mycmbbox',
fieldLabel: '您的职业',
store: 'MyJsonStore'
},
{
xtype: 'numberfield',
anchor: '100%',
id: 'workyears',
fieldLabel: '入职时长',
editable: false,
maxValue: 30,
minValue: 0
}
]
}
]
});
me.callParent(arguments);
}, onButtonClick1: function(button, e, eOpts) {
var sex=Ext.getCmp('radio').getChecked()[0].boxLabel;
var type=" ";
var cbitems=Ext.getCmp('mycheckbox').items;
for(var i=0;i<cbitems.length;i++){
if(cbitems.get(i).checked){
type=type+" "+cbitems.get(i).boxLabel;
}
}
var birth=Ext.getCmp('birth').getValue();
var date=Ext.Date.format(new Date(birth),'Y-m-d');
var pro=" ";
pro=Ext.getCmp('mycmbbox').value;
var year=" ";
years=Ext.getCmp('workyears').value;
var ad=" ";
ad=Ext.getCmp('ad-textarea').getValue();
Ext.getCmp('advice').close();
var advice="性别：\t"+sex+"\n建议类型：\t"+type+"\n出生日期：\t"+date+"\n职业：\t"+pro+"\n入职时长：\t"+years+"\n建议：\n"+ad;
alert(advice);
},
扫一扫
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
