Extjs — 入门

Extjs与我以往所学习到的其它语言，其它语言框架都有所不同。

它在“描述”对象的时候使用的是“Json”（JavaScript对象符号）的格式，结构化，完全独立于语言。

<script type ="text/javascript">
Ext.onReady(function(){
Ext.Msg.show({
title:‘提示',
msg:'我有三个按钮，和一个文本区',
modal:true,
value:'请输入',
button:Ext.Msg.YESNOCANCEL
});
)};
</script>

通过这个例子，也许对它的“结构化”就有一定的了解，之所以说它与我之前所学的其它语言有所不同。是因为它“做”前台的时候，语言缺少一个逻辑性。

之后通过自己的学习，领悟到其实它的核心就是，在一个面板（panel）上按不同的布局方式加入不同的控件、或者进行面板嵌套。

 （由于屏幕大小所限，截图不是很完整。）

这个“简单”的小作品，采用ViewPort，最在的优点在于它可以自动调整以适应不同的屏幕大小。

new Ext.Viewport({
items:
[
{
title: '简易书籍管理系统ExtJs',
collapsible: true,
html: '<br><center><font size = 6>简易书籍管理系统</font></center>',
region: 'north',
height: 100,
tools:
[
{ id: 'close' },
{ id: 'minimize' },
{ id: 'maximize' }
]
},

{

title: '功能菜单',
items:
[

new Ext.Panel({
layout:'accordion',
anchor:'100% 100%',
layoutConfig:
{
//activeOnTop:true, //设置打开的子面板置顶
fill:true,
hideCollapseTool:false,
titleCollapse:true,
animate:true
},
frame:true,
defaults:
{
bodyStyle:'backgroundcolor:#FFFFFF;padding:15px'
},
items:
[

{
title:'嵌套面板一',
items:
[
tree //关于tree的定义在主程序中
]
},

{
title:'嵌套面板二',
html:'说明二'
},

{
title:'嵌套面板三',
html:'说明三'
}
]
})
],
split: true,
collapsible: true,
region: 'west',
 250,
listeners: { 
//监听事务
collapse: function() {
grid.syncSize();
}
}
},

{
title: '系统说明 ',
layout: "anchor",
items: 
[
toolbar, //关于toolbar,grid的定义都在主程序中
grid
],
collapsible: true,
region: 'center',
}
]
});

同时，在其中还加入了一个window弹出窗体的运用。

通过单击“新增书籍”按钮，弹出一个window窗体。

关于这个window上的布局，其实是在这个window上先加上一个panel窗体，然后也是一样的，往上面加入控件或者嵌套窗体。

var addpanel =new Ext.form.FormPanel({ 
//新增书籍-窗体
height: 200,
 300,
frame: true,
items:
[
{
xtype: 'textfield',
 150,
name: 'add-bookname',
fieldLabel: '书籍名称'
},

{
xtype: 'textfield',
 150,
name: 'author',
fieldLabel: '作者'
},

{
xtype: 'combo',
 150,
fieldLabel: '书籍类型',
name: 'type',
store: store,
displayField: 'type',
valueField: 'type',
mode: 'local',
typeAhead: true
},

{
xtype: 'textfield',
 150,
name: 'price',
fieldLabel: '价格'
}
]
});

var window =new Ext.Window({ 
//window窗体
title: '新增书籍',
height: 250,
 300,

closeAction: 'hide', 
//关闭按钮的作用，是隐藏窗口。默认为关闭窗口

modal: true, 
//当这个window弹出来的时候，其它窗体不可用
items:
[
addpanel
],

buttons:
[
{ text: '确定',  80 },
{ text: '取消',  80 }
]
});

之前一些关于总结性的语句，只是自己的观点，如果有不同的意见，欢迎一起讨论，嘻嘻。