Extjs与我以往所学习到的其它语言，其它语言框架都有所不同。
它在“描述”对象的时候使用的是“Json”（JavaScript对象符号）的格式，结构化，完全独立于语言。
代码
<script type ="text/javascript">
Ext.onReady(function(){
Ext.Msg.show({
title:‘提示',
msg:'我有三个按钮，和一个文本区',
modal:true,
value:'请输入',
button:Ext.Msg.YESNOCANCEL
});
)};
</script>
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',
width: 250,
listeners: {
//监听事务
collapse: function() {
grid.syncSize();
}
}
},
{
title: '系统说明 ',
layout: "anchor",
items:
[
toolbar, //关于toolbar,grid的定义都在主程序中
grid
],
collapsible: true,
region: 'center',
}
]
});
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',
width: 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,
width: 300,
frame: true,
items:
[
{
xtype: 'textfield',
width: 150,
name: 'add-bookname',
fieldLabel: '书籍名称'
},
{
xtype: 'textfield',
width: 150,
name: 'author',
fieldLabel: '作者'
},
{
xtype: 'combo',
width: 150,
fieldLabel: '书籍类型',
name: 'type',
store: store,
displayField: 'type',
valueField: 'type',
mode: 'local',
typeAhead: true
},
{
xtype: 'textfield',
width: 150,
name: 'price',
fieldLabel: '价格'
}
]
});
var window =new Ext.Window({
//window窗体
title: '新增书籍',
height: 250,
width: 300,
closeAction: 'hide',
//关闭按钮的作用，是隐藏窗口。默认为关闭窗口
modal: true,
//当这个window弹出来的时候，其它窗体不可用
items:
[
addpanel
],
buttons:
[
{ text: '确定', width: 80 },
{ text: '取消', width: 80 }
]
});
//新增书籍-窗体
height: 200,
width: 300,
frame: true,
items:
[
{
xtype: 'textfield',
width: 150,
name: 'add-bookname',
fieldLabel: '书籍名称'
},
{
xtype: 'textfield',
width: 150,
name: 'author',
fieldLabel: '作者'
},
{
xtype: 'combo',
width: 150,
fieldLabel: '书籍类型',
name: 'type',
store: store,
displayField: 'type',
valueField: 'type',
mode: 'local',
typeAhead: true
},
{
xtype: 'textfield',
width: 150,
name: 'price',
fieldLabel: '价格'
}
]
});
var window =new Ext.Window({
//window窗体
title: '新增书籍',
height: 250,
width: 300,
closeAction: 'hide',
//关闭按钮的作用，是隐藏窗口。默认为关闭窗口
modal: true,
//当这个window弹出来的时候，其它窗体不可用
items:
[
addpanel
],
buttons:
[
{ text: '确定', width: 80 },
{ text: '取消', width: 80 }
]
});
之前一些关于总结性的语句，只是自己的观点，如果有不同的意见，欢迎一起讨论，嘻嘻。
