EXTJS4.x之實戰專案（9）SectionContentGridPanel欄目內容管理頁的實現
阿新 • • 發佈：2019-02-13
上面的文章管理，媒體管理和欄目管理都差不多，實現之後效果如下圖
由於欄目內容管理與其他的不同所以我們這裡來詳細實現一下。
1）為SectionContentGridPanel新增一下控制元件toolbar，combobox，button和textfield。屬性如下圖效果
2）為combobox配置資料來源
由於combobox的資料來源是欄目列表故我們可以直接使用之前製作好的SectionStore。
將combobox的store設定為SectionStore，displayField設定為sectionName。儲存執行效果如下圖
3）製作SectionContentGridPanelController
1.新增一個SectionContentGridPanelController
2.新增SectionContentGridPanel到views中
3.新增以下函式init,add,del,search,detail,sectionChancle。除了init函式其他都有一個sender的引數。如下圖
4）編寫init函式，內容如下
this.control( { 'SectionContentGridPanelController > toolbar > button[text=新增]': { click: this.add }, 'SectionContentGridPanelController > toolbar > button[text=刪除]': { click: this.del }, 'SectionContentGridPanelController > toolbar > button[text=檢視]': { click: this.detail }, 'SectionContentGridPanelController > toolbar > button[text=查詢]': { click: this.search }, 'SectionContentGridPanelController > toolbar > combobox': { select: this.sectionChancle } } );
5）製作SectionContentStore。結構和屬性如下圖：
與之配套的SectionContent如下
6）配置SectionContentGridPanel，如下圖
配置的方法和原理之前已經講過，這裡不在重複。
7）編寫sectionChancle，把sectionChancle改名為sectionSelect並新增一個叫records的引數，對應的在init函式也改下。
sectionSelect內容如下：
程式碼的作用是獲取選擇的欄目的欄目id，然後提交後臺重新載入資料。到現在我們仍然看不到任何資料，因為我們還沒新增內容。var grid = sender.ownerCt.ownerCt; proxy = grid.store.getProxy(); proxy.extraParams = {sectionId:records[0].get('id')}; grid.store.reload();
8）實現新增內容到指定欄目中。我們要實現的效果是當選擇了一個欄目之後點選新增，彈出一個視窗讓操作者新增內容。
1.製作內容新增視窗ContentWindow，如下圖：
2.為ContentWindow的combobox編寫一個ContentTypeStore資料來源。
Ext.define('MyApp.store.ContentTypeStore', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'ContentTypeStore',
data: [
{
text: '活動資源',
value: 1
},
{
text: '媒體資源',
value: 2
},
{
text: '文章資源',
value: 3
}
],
fields: [
{
name: 'text'
},
{
name: 'value'
}
]
}, cfg)]);
}
});這裡只貼上生成的程式碼，需要讀者根據程式碼去設定屬性。將ContentWindow的combobox的store設定為ContentTypeStore
3.為ContentWindow做一個控制器ContentWindowController，做如下圖程式碼的配置
Ext.define('MyApp.controller.ContentWindowController', {
extend: 'Ext.app.Controller',
views: [
'ContentWindow'
],
init: function() {
this.control(
{
'ContentWindow > button[text=確定]':
{
click: this.commit
},
'ContentWindow > gridpanel > toolbar > button[text=查詢]':
{
click: this.search
},
'ContentWindow > gridpanel > toolbar > combobox':
{
select: this.onSelect
}
}
);
},
onSelect: function(sender, records) {
var grid = sender.ownerCt.ownerCt;
var win = grid.ownerCt;
proxy = grid.store.getProxy();
win.contentType = records[0].get('value');
proxy.extraParams = {contentType:win.contentType};
grid.store.reload();
},
search: function(sender) {
var grid = sender.ownerCt.ownerCt;
var win = grid.ownerCt;
proxy = grid.store.getProxy();
kw = sender.ownerCt.child("textfield[fieldLabel=名稱:]");
proxy.extraParams = {
keyWord:kw.value,
contentType:win.contentType
};
grid.store.reload();
},
commit: function(sender) {
var win = sender.ownerCt;
var grid = win.child('gridpanel');
var selRecords = grid.getSelectionModel().getSelection();
var len = selRecords.length;
var ids = "";
if (len == 0) {
Ext.MessageBox.alert("提示訊息", "您未選中行!");
return false;
}
var contentIds = "";
var contentTypes = "";
for (var i = 0; i < len; i++) {
if (i == len - 1)
{
contentIds += selRecords[i].get("id");
contentTypes += win.contentType;
}
else {
contentIds += selRecords[i].get("id") + ",";
contentTypes += win.contentType + ",";
}
}
Ext.Ajax.request( {
url : '../section/addContents',
method : 'GET',
params : {
sectionId : win.sectionId,
contentTypes : contentTypes,
contentIds : contentIds,
},
success : function(response, options) {
win.reload();
win.close();
},
failure : function() {
Ext.MessageBox.alert("提示訊息", "連線失敗!");
}
});
}
});
4.編寫SectionContentGridPanelController的add函式，程式碼如下
combobox = sender.ownerCt.child('combobox');
if(!combobox.value){
Ext.Msg.alert('提示', '還沒選擇欄目!');
return;
}
var win = Ext.create('MyApp.view.ContentWindow', {
buttonAlign: 'center',
title:'新增內容到 <'+combobox.getDisplayValue()+'>欄目中'
});
win.show();
win.sectionId = combobox.value;
grid = win.child('gridpanel');
//清空引數
grid.store.proxy.extraParams={};
grid.store.reload();
win.reload=function(){
sender.ownerCt.ownerCt.store.reload();
};Ext.define('MyApp.store.ContentStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.SectionContent'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'ContentStore',
model: 'MyApp.model.SectionContent',
proxy: {
type: 'ajax',
url: '../section/contentListAll',
reader: {
type: 'json',
root: 'results',
totalProperty: 'totalCount'
}
}
}, cfg)]);
}
});
8）實現刪除功能編寫del函式，輸入以下內容
var grid = sender.ownerCt.ownerCt;
var selRecords = grid.getSelectionModel().getSelection();
var len = selRecords.length;
var ids = "";
if (len == 0) {
Ext.MessageBox.alert("提示訊息", "您未選中行!");
return false;
}
Ext.Msg.confirm("提示", "確定要刪除嗎?", function (btn)
{
if (btn == "yes") {
selRecords = grid.getSelectionModel().getSelection();
len = selRecords.length;
if(len == 0){
return;
}
for (var i = 0; i < len; i++) {
if (i == len - 1)
{
ids += selRecords[i].get("id");
}
else {
ids += selRecords[i].get("id") + ",";
}
}
Ext.Ajax.request(
{
url: "../section/deleteContent",
waitMsg: '正在提交資料',
waitTitle: '提示',
params: {
"ids": ids
},
success: function (reponse, option) {
grid.getStore().reload();
Ext.MessageBox.alert("提示訊息", "刪除成功！");
},
failure: function () {
Ext.MessageBox.alert("提示訊息", "刪除失敗！");
}
}
);
}
});9）.實現檢視詳細
1.新增一個視窗，SectionContentWindow生成程式碼如下
Ext.define('MyApp.view.SectionContentWindow', {
extend: 'Ext.window.Window',
alias: 'widget.SectionContentWindow',
height: 600,
width: 600,
title: '欄目內容管理',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
height: 550,
bodyPadding: 10,
title: '',
items: [
{
xtype: 'textfield',
anchor: '100%',
name: 'id',
readOnly: true,
fieldLabel: 'id'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'name',
fieldLabel: 'name'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'type',
readOnly: true,
fieldLabel: 'type'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'sectionId',
readOnly: true,
fieldLabel: 'sectionId'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'createTime',
readOnly: true,
fieldLabel: 'createTime'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'sortNo',
fieldLabel: 'sortNo'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'topFlag',
fieldLabel: 'topFlag'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'contentId',
readOnly: true,
fieldLabel: 'contentId'
},
{
xtype: 'textfield',
anchor: '100%',
name: 'logo',
fieldLabel: 'logo'
},
{
xtype: 'textareafield',
anchor: '100%',
name: 'description',
fieldLabel: 'description'
},
{
xtype: 'textareafield',
anchor: '100%',
name: 'data',
fieldLabel: 'data'
}
]
}
]
});
me.callParent(arguments);
}
});根據程式碼自行設定視窗
2.編寫detail函式，程式碼如下
var grid = sender.ownerCt.ownerCt;
var selRecords = grid.getSelectionModel().getSelection();
var len = selRecords.length;
var ids = "";
if (len == 0) {
Ext.MessageBox.alert("提示訊息", "您未選中行!");
return false;
}
if (len > 1) {
Ext.MessageBox.alert("提示訊息", "一次只能檢視一行!");
return false;
}
var from;
var win;
function submit() {
if (!from.getForm().isValid()) return;
from.getForm().submit({
waitMsg: '正在提交資料',
waitTitle: '提示',
url: '../section/updateContent',
method: 'POST',
success: function(form, action) {
Ext.Msg.alert('提示', '儲存成功');
sender.ownerCt.ownerCt.store.reload();
win.close();
},
failure: function(form, action) {
Ext.Msg.alert('提示', '介面異常');
}
});
}
win = Ext.create('MyApp.view.SectionContentWindow', {
buttons: [
{ text: '儲存', handler: submit },
],
buttonAlign: 'center'
});
win.show();
from = win.items.get(0);
data = selRecords[0];
from.getForm().findField("id").setValue(data.get("id"));
from.getForm().findField("name").setValue(data.get("name"));
from.getForm().findField("type").setValue(data.get("type"));
from.getForm().findField("sectionId").setValue(data.get("sectionId"));
from.getForm().findField("createTime").setValue(data.get("createTime"));
from.getForm().findField("data").setValue(data.get("data"));
from.getForm().findField("sortNo").setValue(data.get("sortNo"));
from.getForm().findField("topFlag").setValue(data.get("topFlag"));
from.getForm().findField("description").setValue(data.get("description"));
from.getForm().findField("contentId").setValue(data.get("contentId"));
from.getForm().findField("logo").setValue(data.get("logo"));10）實現查詢功能，編寫search函式
var grid = sender.ownerCt.ownerCt;
proxy = grid.store.getProxy();
kw = sender.ownerCt.child("textfield[fieldLabel=名稱:]");
proxy.extraParams = {
keyWord:kw.value,
sectionId:sender.ownerCt.child("combobox").value
};
grid.store.reload();至此所有功能做完，細節就留給讀者自己調整了，下面是最終的效果
