ExtJs學習（六）~~入門實戰
阿新 • • 發佈：2018-12-12
一、開發一個“玩家資訊”的功能~~ 效果圖
【思路分析：】
這裡需要一個grid元件去展示資料，grid元件需要一個columns陣列顯示返回結果，同時grid需要一個store，store需要一個model。同時grid也需要一個toolbar和queryForm。Grid表格是放在主視圖裡面的。這裡一共就有8個元件。
我們約定好，除了store、main View是create，其他元件都採用define模式。個人習慣吧。
二、整理開發過程
需要元件推導過程如上，但是開發時反過來操作：
first：Model -- 提供模板，只需要改欄位+型別，根據JAVA的實體。
seconde：Store -- 只需要修改
third: columns -- 因為顯示的列比較多，這裡把columns單獨成一個數組來寫。只需要修改表頭。render對返回的值進行自定義輸出。
four: toolbar – 幾乎每一個功能都會附帶一個查詢框。這裡先寫好該queryForm元件。修改表單的name值跟欄位名即可。
Five: grid – 修改columns+store名+toolbar名。將所有元件放到grid即可。
six: main view -- 主檢視在onReady裡面，載入grid主鍵即可。
Seven: function – 根據你的業務需求寫 所有的事件函式
三、開發程式碼 ~~ 以下采用MVC分層的開發模式。
first:Model
/*-----------------------------1. model start-------------------------*/ Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name : 'channel', type : 'string' }, { name : 'channel_name', type : 'string' }, { name: 'id',type:'long'}, { name: 'createDate',type:'string'} ] }); /*-----------------------------model end-------------------------*/
seconde：Store
/*-----------------------------2.store star-------------------------*/
var simpsonsStore = Ext.create('Ext.data.Store', {
model: 'User', //這裡的Model直接引用上面定義的MODEL
pageSize: 1000,
storeId:'simpsonsStore',
remoteSort : true,
/* data : [
{channel: '管道一', channel_name: '騰訊', id: 1001, createDate: '2018-08-06 09:04:04'},
{channel: '管道二', channel_name: 'IOS', id: 1002, createDate: '2018-08-06 09:04:04'},
{channel: '管道三', channel_name: '百度', id: 1003, createDate: '2018-08-06 09:04:04'},
{channel: '管道四', channel_name: '測試管道', id: 1004, createDate: '2018-08-06 09:04:04'},
]*/
proxy: {
type: 'ajax',
actionMethods:'create',
extraParams: {},
url: project+'/game/UserInfo/roleDemo',
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
},
pageSize: 14,
autoLoad: true,
remoteSort: true,//全域性排序
sorters: {
direction: 'ASC',
property: 'id'
}
});
/*-----------------------------store end-------------------------*/
third: columns
/*-----------------------------3.columns star-------------------------*/
var colunmArray=new Array(
{ text: '渠道', dataIndex: 'channel' },
{ text: '渠道名稱', dataIndex: 'channel_name',renderer:function(value,meta,record){
return value+"("+record.data.channel+")";
}},
{ text: '渠道ID', dataIndex: 'id',
renderer : function(value){
if(value == 1001)
return '騰訊1001';
else if(value == 1002)
return 'ios1002';
else if(value == 1003)
return '百度1003';
else if(value == 1004)
return '測試渠道1004';
else
return 'PC';
}
},
{
text: '建立時間', dataIndex: 'createDate'
}
);
/*-----------------------------columns end-------------------------*/
four: toolbar
/*-----------------------------4.toolbar star-------------------------*/
/*
var xxxPanelForm1 = Ext.create('Ext.form.Panel',{
id:'xxxPanelForm',
layout: {
type:'hbox',
//控制元件橫向拉伸，寬度為最控制元件的寬
/!*align:'stretchmax'*!/
},
border:'10 5 3 10',
bodyPadding: 5,
scrollable: false,
defaults: {
/!*labelWidth: 35,*!/
labelSeparator: ':'
},
items: [{
xtype: 'hidden',
fieldLabel: 'Id',
//allowBlank: false,
name:'pid'
},{
xtype: 'combobox',
fieldLabel: '等級1',
labelWidth:40,
matchFieldWidth:false,
name:'level',
width:150,
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{"value":"HIGH", "name":"高"},
{"value":"MEDIUM", "name":"中"},
{"value":"LOW", "name":"低"}
]
}),
queryMode: 'local',
displayField: 'name',
valueField: 'value'
},{
xtype: 'textfield',
fieldLabel: '商品編號',
labelWidth:60,
margin:'0 0 0 10',
reference: 'productSearchForm-pnumber',
name:'pnumber',
//allowBlank : false,
},{
xtype: 'button',
margin:'0 0 0 10',
text: '查詢',
}],
});
*/
Ext.define('Admin.view.myToolbar', {
extend:'Ext.toolbar.Toolbar',
id:"myfirstDefine",
xtype: 'myfirstDefine',
dock: 'top',
autoScroll:true,
items: [ {
xtype: 'combobox',
fieldLabel: '等級1',
labelWidth:40,
matchFieldWidth:false,
name:'level',
width:150,
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{"value":"HIGH", "name":"高"},
{"value":"MEDIUM", "name":"中"},
{"value":"LOW", "name":"低"}
]
}),
queryMode: 'local',
displayField: 'name',
valueField: 'value'
},{
fieldLabel : '角色暱稱',
labelWidth : 60,
xtype : 'textfield',
id : 'roleName',
name :'roleName',
// allowBlank : false, // 不能為空
emptyText : '暱稱'
}, "-", {
fieldLabel : '手機號',
labelWidth : 60,
xtype : 'textfield',
id : 'phone',
name :'phone',
emptyText : '手機號'
}, "-", {
fieldLabel : '裝置型號',
labelWidth : 60,
xtype : 'textfield',
id : 'deviceModel',
name :'deviceModel'
}, {
xtype : 'button',
text :'查詢',
handler: function() {
fileSelect();
}
}]
});
/*-----------------------------toolbar end-------------------------*/
Five: grid
/*-----------------------------5.grid star-------------------------*/
Ext.define('Admin.view.product.ProductGrid', {
extend: 'Ext.grid.Panel',
xtype: 'productGrid',
viewConfig:{
enableTextSelection:true
},
id:'productGrid',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
//store:aaStore,
columns: colunmArray,
height: 400,
bbar : new Ext.PagingToolbar({
store : Ext.data.StoreManager.lookup('simpsonsStore'),
displayInfo : true,
displayMsg : '第 {0} - {1} 條 共 {2} 條 000',
emptyMsg : "沒有記錄"
}),
dockedItems: [
{xtype:"myfirstDefine"}
//xxxPanelForm1
]
});
/*var roleInfoGrid=Ext.create('Ext.grid.Panel', {
viewConfig:{
enableTextSelection:true
},
id:'gridPanel',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
//store:aaStore,
columns: colunmArray,
height: 400,
bbar : new Ext.PagingToolbar({
store : Ext.data.StoreManager.lookup('simpsonsStore'),
displayInfo : true,
displayMsg : '第 {0} - {1} 條 共 {2} 條 ',
emptyMsg : "沒有記錄"
}),
dockedItems: [
xxxPanelForm1,{xtype:"myfirstDefine"}
]
});*/
/*-----------------------------grid end-------------------------*/
six: main view
/*-----------------------------6.main view star-------------------------*/
Ext.onReady(function() {
var roleUrl=project+"/report/roleInfo.jsp";
var doUrl=project+"/report/speakForbidden.jsp";
Ext.create('Ext.container.Viewport', {
title:'角色帳號資訊',
layout: {
type: 'fit'
},
items: [
//roleInfoGrid
{xtype:'productGrid'}
]
});
if(window.parent.stealPage){
Ext.getCmp("roleId").setValue(window.parent.tabRoleId);
window.parent.tabRoleId=null;
window.parent.stealPage=false;
fileSelect();
}
});
/*-----------------------------main view end-------------------------*/
Seven: function
Ext.define('Admin.view.product.ProductViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.productViewController',
productGridOpenAddWindow : function(){
//alert("新增商品的方法");
//alert("新增商品的方法");
var cfg = Ext.apply({
xtype: 'productGridWindow'
,items: [Ext.apply({xtype: 'productGridForm'})]
},{
title:'新增商品'//,width: 800//,height: 600
});
Ext.create(cfg);
},
productGridWindowClose:function(btn){
//alert("關閉");
var win = btn.up('window');
if(win){
win.close();
}
},
productGridFormSubmit:function(btn){
//alert("儲存");
var productGridForm = btn.up('form').getForm();
var win = btn.up('window');
productGridForm.submit( {
//waitTitle : '請稍後...',
//waitMsg : '正在儲存訂單資訊,請稍後...',
url : 'product/saveOrUpdate',
method : 'post',
success : function(form, action) {
Ext.Msg.alert("提示",action.result.msg);
win.close();
//必須SupplierGrid中增加對應id:'supplierGrid'屬性
Ext.getCmp('productGrid').store.reload();
},
failure : function(form, action) {
Ext.Msg.alert("提示",action.result.msg);
}
});
},
productGridDeleteDate:function(btn){
//alert("11");
var grid = btn.up('gridpanel');
var selModel = grid.getSelectionModel();
if (selModel.hasSelection()) {
Ext.Msg.confirm("警告", "確定要刪除嗎？", function (button) {
if (button == "yes") {
var selected = selModel.getSelection();
var selectIds = []; //要刪除的id
Ext.each(selected, function (record) {
//alert(record.data.pid);
selectIds.push(record.data.pid);
})
Ext.Ajax.request({
url : 'product/deleteByIds',
method : 'post',
params : {
ids:selectIds
},
success: function(response, options) {
Ext.getCmp('productGrid').store.reload();
var json = Ext.util.JSON.decode(response.responseText);
if(json.success){
Ext.Msg.alert('操作成功', json.msg);
grid.getStore().reload();
}else{
Ext.Msg.alert('操作失敗', json.msg);
}
}
});
}
});
}else{
Ext.Msg.alert('提示',"請選擇一行資料進行刪除!");
}
},
productGridOpenEditWindow:function(btn){
//alert("xiugai");
var grid = btn.up('gridpanel');//獲取Grid檢視
var selModel = grid.getSelectionModel();//獲取Grid的SelectionModel
if (selModel.hasSelection()) {//判斷是否選中記錄
var record = selModel.getSelection()[0];//獲取選中的第一條記錄.
//alert(record);
//console.log(record);
//建立修改window和form
var productGridWindow = Ext.widget('productGridWindow',{
title:'修改商品',
items: [{xtype: 'productGridForm'}]
});
//讓form載入選中記錄
productGridWindow.down("form").getForm().loadRecord(record);
}else{
Ext.Msg.alert('提示',"請選擇一行資料進行修改!");
}
},
productSearchFormSubmit:function(btn){
//alert("你好");
var store = btn.up('gridpanel').getStore();
//2.按照所選欄位進行查詢引數（條件）的擴充套件
var formValues=btn.up('form').getForm().getValues();
//alert(formValues["pname"]);
//alert(formValues["pnumber"]);
//alert(formValues["level"]);
//alert(formValues["wname"]);
if (formValues["pname"]==''&&formValues["pnumber"]==''&&formValues["level"]=='' && formValues["wname"]=='') {
store.getProxy().extraParams ={ };
store.reload();
}else{
//alert("失敗");
//1.清空所有查詢條件
Ext.apply(store.proxy.extraParams, {
pname:'',
pnumber:'',
level:'',
wname:''
});
Ext.apply(store.proxy.extraParams, {
pname:this.lookupReference('productSearchForm-pname').getValue(),
pnumber:this.lookupReference('productSearchForm-pnumber').getValue(),
level:this.lookupReference('productSearchForm-level').getValue(),
wname:this.lookupReference('productSearchForm-wname').getValue()
});
store.load({params: {start:0,limit:14,page:1}});
}
},
productGridExportXls:function(){
//alert("商品匯出");
window.location.href = "product/exportExcel";
}
});基於上面的七大元件即可快速開發一個模組。而且寫了自動生成model跟store的工具類，可以更快寫出一個模組。
如果說，你理解好上面七個元件的使用關係的話，那麼根據上面的理解，直接copy一份程式碼，直接改store、url即可