我的extjs学习之路2—信息展示和信息筛选的实现
用了一个周的时间熟悉了几个比较常用到的组件，根据API提供的示例也写出了几个比较粗陋的UI，下面的时间就投入到了ExtJs的具体应用上来。
数据的查询部分
数据的查询无非是将查询出来的数据传到前台显示。稍微复杂一点就是通过部分的查询条件来将数据查出来，然后通过前台展示。那么如何实现ExtJs和后台之间的交互呢？
首先看下面的这一幅图：
可以看到上图，这个一个大的Panel，Panel中包含两部分，上面的信息检索部分是一个formpanel，下面的信息显示部分是一个gridpanel，首先要加载的是全部的数据，然后可以通过部分条件的筛选来加载所检索的数据。这属于两个方面的内容。
首先看布局的实现：
定义上面的form：createForm，定义下面的grid：createGrid，然后分别将定义好的createForm和createGrid装入到大的Panel中来。代码表示如下：
Ext.define('com.xx.xx.xxx.customerInfo', {
extend: 'Ext.panel.Panel',
initComponent: function() {
varme = this;
varform = me.createForm();
vargrid = me.createGrid();
me.items= [ form, grid ];
me.callParent(arguments);
}
}
gridPanel部分:首先放入的是全部的数据信息，后来是通过信息检索得到的数据信息
createGrid : function() {
varme = this;
vargrid = Ext.create('Ext.grid.Panel', {
width: '100%',
border: false,
forceFit: true,
selModel: Ext.create('Ext.selection.CheckboxModel'),
store:me.createCustomerStore(),
tbar:[{
xtype:'button',
text:'修改客户信息',
handler:function(){
varmodels = grid.getSelectionModel().getSelection();
if(models.length==0){
Ext.Msg.alert('提示 :','请选择一条数据');
return;
}
if(models.length>1){
Ext.Msg.alert('提示 :','请选择一条数据');
return;
}
varwin = Ext.create('com.xxxx.xxxxx.usermessage.updateCustomerWin',{
myGrid:me
});
win.getComponent(0).getForm().loadRecord(models[0]);
win.show();
}
},{
xtype:'button',
text:'刷新',
handler:function(){
me.store.load();
}
}],
columns: [ {
text: 'id',
dataIndex: 'id',
hidden: true
},{
text: '客户名称',
dataIndex: 'customername'
},{
text: '所属公司',
dataIndex: 'company'
},{
text: '客户类型',
dataIndex: 'customertype',
renderer:function(value){
if(value){
return'VIP客户';
}else{
return'普通客户';
}
}
},{
text: '联系人',
dataIndex: 'contact'
}]
});
returngrid;
}
Formpanel部分
typeStore =Ext.create('Ext.data.ArrayStore', {
fields: [ 'abbr','value' ],
data: [ [ '普通用户',0 ],['VIP用户',1 ] ]
});
createForm : function() {
varme = this;
varformPanel = Ext.create('Ext.form.Panel', {
frame: true,
width: '100%',
bodyPadding: 5,
collapsible:true,
fieldDefaults: {
border: false,
labelAlign: 'right',
labelWidth: 90,
msgTarget: 'qtip'
},
items: [ {
layout: 'form',
frame: 'true',
border: false,
buttonAlign:'center',
buttons:[{
text: '查询',
width: 100,
align:'center',
handler: function(button) {
varcname = me.query('textfield[name=cname]')[0].getValue();
varctype = me.query('combobox[name=ctype]')[0].getValue();
varstore = Ext.create('Ext.data.Store', {
fields: [ 'customername','company', 'customertype','contact' ],
proxy: {
type: 'ajax',
url: './customer/getcustomerInfo.do',
extraParams: {
'cname': cname,
'ctype': ctype
},
reader: {
type: 'json',
root: 'sresult'
}
}
});
store.load({
scope : me,
callback: function(records,operation,success){
vargrid = me.query('grid')[0];
varoldStore = grid.getStore();
oldStore.removeAll();
oldStore.add(records);
grid.getView().refresh();
}
});
}
}],
defaults: {
anchor: '100%'
},
items: [ {
xtype: 'container',
border: false,
layout: 'hbox',
items: [ {
xtype: 'textfield',
border: false,
align:'center',
name: 'cname',
fieldLabel: '客户名称',
labelWidth: 300,
width: 600
},{
xtype: 'combobox',
name: 'ctype',
border: false,
align:'center',
fieldLabel: '客户类型',
labelWidth: 200,
width: 400,
store: typeStore,
displayField: 'abbr'
}]
} ]
}]
});
returnformPanel;
}
相关知识
sheet = workbook.active
哪些地方可以发布宠物救助、寻宠信息？
宠物管理系统的设计及实现.docx
毕设项目：宠物饲养信息交流平台的设计与实现(JSP+java+springmvc+mysql+MyBatis)
基于Django的宠物信息交流管理系统设计
「成都宠物摄影招聘信息」
「宠物医生学习招聘信息」
今天我开始学习:PETSHOP3.0宠物商店（经典案例）
《基于javaweb+mysql数据库实现的宠物领养网站》宠物管理
【宠物狗表演培训班信息 培训/价格信息】
网址: 我的extjs学习之路2—信息展示和信息筛选的实现 https://m.mcbbbk.com/newsview263098.html
| 上一篇: 泰达宠物狗怎么训练的啊？ |
下一篇: 盒子模型 |
