통용되는 Extjs 삭제 검사 모듈을 성공적으로 완성하였다
31040 단어 ExtJs
포털 함수는 다음과 같습니다.
function getADES(dataliststr, url, searchstr, idpanel, namepanel,mainIndex) {
var tstore = getStore(url, dataliststr);
tstore.load({ params: { start: 0, limit: 10} });
var grid = new Ext.grid.GridPanel({
height:300,
width:400,
store: tstore,
id:idpanel,
loadMask:true,
trackMaskOver: true,
cm: getCM(dataliststr),
bbar: getPTB(dataliststr, searchstr,url, idpanel,namepanel,mainIndex)
});
//Ext.getCmp(idpanel).reload();
var userPanel = new Ext.Panel({
title:namepanel,
items:grid,
layout:'fit',
region: 'center',
collapsible: true,
loadMask:{msg:'wait......'}
});
return userPanel;
};간단한 설명: dataliststr, 우리가 필요로 하는 데이터 테이블 필드, 예를 들어'ID,name,department'를 봉인합니다.이렇게 구성된 구조, URL은 우리가 데이터를 얻는 주소, 검색str, 검색 상자에서 검색해야 하는 필드입니다.idpanel은 우리의gridpanel에 필요한 id입니다.namepanel은 우리 창의 이름입니다.mainIndex는 데이터 테이블의 주 키 필드입니다. 삭제할 때 필요합니다.
우선, 우리는store를 하나 얻어야 한다.코드는 다음과 같습니다.
function getStore(url, dataliststr) {
var columns = new Array();
var colarr = dataliststr.split(',');
for (var i = 0; i < colarr.length; i++) {
columns.push({
name: colarr[i],
type: 'string'
});
}
var tmpRecord = new Ext.data.Record.create(columns);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:url+"?cmd=list",
method:'GET'
}),
remoteSort:true,
reader: new Ext.data.JsonReader({
root:"results"//,
//totalProperty:'totalCount'
},tmpRecord)
});
return store;
}백그라운드 코드는 다음과 같습니다.
public partial class View_usermanage_proCate : System.Web.UI.Page
{
private static ProCateManager pcManager = new ProCateManager();
public string JsonTest = "";
protected void Page_Load(object sender, EventArgs e)
{
string cmd = Request.QueryString["cmd"];
/*
List<string> columns = new List<string>();
columns.Add("CateID");
columns.Add("ProCate");
string results = pcManager.getAllProCate(columns, 0, 10);
JsonTest = results;
*/
if (cmd.Equals("list"))
{
List<string> columns = new List<string>();
columns.Add("CateID");
columns.Add("ProCate");
int start = int.Parse(Request.Params["start"]);
int limit = int.Parse(Request.Params["limit"]);
string results = pcManager.getAllProCate(columns, start, limit);
JsonTest = results;
Response.Write(results);
Response.End();
}
if (cmd.Equals("add"))
{
string cate = Request.Params["ProCate"];
pcManager.addProCate(cate);
Response.Write("{success:true}");
Response.End();
}
if (cmd.Equals("edit"))
{
Response.Write("can't edit");
Response.End();
}
if (cmd.Equals("del"))
{
string id = Request.Params["uid"];
string[] re = id.Split(',');
foreach (string t in re)
{
pcManager.DelProcate(t);
}
Response.Write("{success:true}");
Response.End();
}
}
}중점은 백그라운드, 데이터 조직 형식이 아니기 때문에 우리는 json의 방식으로 조직하고 구체적인 실제 상황에 따라 모두가 백그라운드를 조직한다.
계속해서 프론트 데스크톱 코드를 말씀드리겠습니다. 저희가store를 가지고 있으면gridPanel의 cm구조를 만들어야 합니다.코드는 다음과 같습니다.
function getCM(dataliststr) {
var columns = new Array();
//columns.push(new Ext.grid.RowNumberer());
var colarr = dataliststr.split(',');
for (var i = 0; i < colarr.length; i++) {
columns.push({
header:getStr(colarr[i]),
dataIndex:colarr[i]
});
}
var columnMode = new Ext.grid.ColumnModel(
columns);
return columnMode;
};구체적인 것은 우리의 데이터리스트str라는 문자창을 해석하여 상응하는column 구조를 구축하는 것이다.
마지막으로 가장 중요한 것은 paging Toolbar입니다.이 안에는 첨삭 수정이 포함되어 있다
코드는 다음과 같습니다.
function getPTB(dataliststr, searchstr, url, idpanel, namepanel,mainIndex) {
var pagingToolbar = new Ext.PagingToolbar({
pageSize: 10,
displayInfo: true,
store: store,
displayMsg: 'show records {0} to {1}, total {2} records',
emptyMsg: 'no data record',
items: [{
text: getStr('id_add'),
handler: function (arg1, arg2, arg3, arg4) {
add(dataliststr, url, idpanel, namepanel);
}
}, {
text: getStr('id_edit'),
handler: function (arg1, arg2, arg3, arg4) {
edit(dataliststr, url, idpanel, namepanel);
}
}, {
text: getStr('id_delete'),
handler: function (arg1, arg2, arg3, arg4,arg5) {
del(dataliststr, url, idpanel, namepanel,mainIndex);
}
}, {
text: getStr('id_search'),
handler: function () {
Ext.Msg.prompt(searchstr, getStr('id_searchContext'), function (btn, text) {
if (btn == 'ok') {
store.filter(searchstr, text);
}
});
}
}
]
});
return pagingToolbar;
};위에서 알 수 있듯이pagingToolbar에서add,edit,del,search의 방법을 정의했다. 그 중에서 Search의 방법은 우리의 메인 키에 따라 검색하는 것이다. 이곳은 장래에 서로 다른 필드에 따라 검색할 수 있도록 바꿀 수 있다.
이 네 가지 첨삭 수정의 실현 방법은 다음과 같다.
function add(dataliststr, url, idpanel, namepanel) {
var columns = new Array();
var colarr = dataliststr.split(',');
for (var i = 0; i < colarr.length; i++) {
columns.push({
fieldLabel: getStr(colarr[i]),
id:colarr[i],
blankText:'not allow null'
});
}
var win = new Ext.Window({
title: namepanel,
width: 500,
height: 200,
items: [{
xtype: 'form',
id: 'form1',
height: 350,
borderStyle: 'padding-top:3px',
frame: true,
defaultType: 'textfield',
labelAlign: 'right',
labelWidth: 57,
defaluts: {
allowBlank: false, width: 200
},
items: columns
}],
buttons: [{
xtype: 'button',
text: getStr('id_sure'),
handler: function () {
if (!Ext.getCmp('form1').getForm().isValid()) {
Ext.Msg.alert('input is unValid');
return false;
}
var paramstr = '({';
for (var i = 0; i < colarr.length; i++) {
if (i == colarr.length - 1) {
paramstr += colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "'})";
}
else {
paramstr += colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "',";
}
}
paramstr = eval(paramstr);
//Ext.Msg.alert('success', idpanel);
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
Ext.Ajax.request({
url: url + "?cmd=add",
params: paramstr,
method: 'POST',
success: function (response, opts) {
Ext.getCmp(idpanel).store.reload();
Ext.Msg.alert('info', response.responseText);
},
failure: function (response, opts) {
Ext.Msg.alert('info', response.responseText);
}
});
}
}, {
xtype: 'button',
text: getStr('id_cancel'),
handler: function () {
for (var i = 0; i < colarr.length; i++) {
Ext.getCmp(colarr[i]).setValue('');
}
}
}]
});
win.show();
};
function edit(dataliststr, url, idpanel,namepanel) {
var userRecord = Ext.getCmp(idpanel).getSelectionModel().getSelections();
var columns = new Array();
var colarr = dataliststr.split(',');
var valarray = new Array();
if (userRecord.length >= 1) {
} else {
Ext.Msg.alert('info','Not Select a Record!');
return false;
}
for (var i = 0; i < colarr.length; i++) {
columns.push({
fieldLabel: getStr(colarr[i]),
id: colarr[i],
blankText: 'not allow null',
value: userRecord[0].get(colarr[i])
});
}
var win = new Ext.Window({
title: namepanel,
width: 500,
height: 200,
items: [{
xtype: 'form',
id: 'form1',
height: 350,
borderStyle: 'padding-top:3px',
frame: true,
defaultType: 'textfield',
labelAlign: 'right',
labelWidth: 57,
defaluts: {
allowBlank: false, width: 200
},
items: columns
}],
buttons: [{
xtype: 'button',
text: getStr('id_sure'),
handler: function () {
if (!Ext.getCmp('form1').getForm().isValid()) {
Ext.Msg.alert('input is unValid');
return false;
}
var paramstr = '({';
for (var i = 0; i < colarr.length; i++) {
if (i == colarr.length - 1) {
paramstr += colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "'})";
}
else {
paramstr += colarr[i] + ":'" + Ext.getCmp(colarr[i]).getValue() + "',";
}
}
paramstr = eval(paramstr);
//Ext.Msg.alert('success', idpanel);
Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
Ext.Ajax.request({
url: url + "?cmd=edit",
params: paramstr,
method: 'POST',
success: function (response, opts) {
Ext.getCmp(idpanel).store.reload();
Ext.Msg.alert('info', response.responseText);
},
failure: function (response, opts) {
Ext.Msg.alert('info', response.responseText);
}
});
}
}, {
xtype: 'button',
text: getStr('id_cancel'),
handler: function () {
for (var i = 0; i < colarr.length; i++) {
Ext.getCmp(colarr[i]).setValue('');
}
}
}]
});
win.show();
};
function del(dataliststr, url, idpanel, namepanel,mainIndex) {
var userRecord = Ext.getCmp(idpanel).getSelectionModel().getSelections();
var len = userRecord.length;
var columns = new Array();
var colarr = dataliststr.split(',');
if (len == 0) {
Ext.Msg.alert('Info', 'Not Select Record');
return false;
}
Ext.Msg.confirm('Info', getStr('id_delconfirm'), function (btn) {
var ids = "";
if (btn == 'yes') {
for (var i = 0; i < len; i++) {
if (i == len - 1) {
ids += userRecord[i].get(mainIndex);
}
else {
ids += userRecord[i].get(mainIndex) + ',';
}
}
Ext.Ajax.request({
url: url+'?cmd=del',
method: 'POST',
params: {
'uid': ids
},
success: function (response, opts) {
Ext.getCmp(idpanel).store.reload();
Ext.Msg.alert('success', 'delete success');
},
failure: function (response, opts) {
Ext.Msg.alert('failure', 'delete failed');
}
})
}
});
};여러분이 비교적 쉽게 이해할 수 있을 거라고 믿습니다. 저는 입문편이 아닙니다. extjs에 관한 기초 지식은 여러분이 관련 문서와 수첩을 찾아보셔야 합니다.
간단하게 자신이 데이터 해석을 하는 방법을 설명한다. 먼저 우리는 상응하는 데이터 테이블 필드와 관련된 정보를 가지고 있기 때문에 우리의 labelField,params 등 구조는 동적 생성이 필요하다.창설 과정에서 나도 적지 않은 번거로움을 만났다.여기 고마워요.
마지막으로 인터페이스 그림 몇 장 붙여주세요.
회사의 컴퓨터 암호화가 비교적 번거로우니 스티커를 붙이지 않으면 여러분도 실마리를 알 수 있습니다.
일 년 동안 일한 불평을 따로 이야기하다.
졸업한 지 1년이 되었는데 기술이 조금도 진보하지 않은 것 같다.저는 제 학습 능력에 대해 비교적 자신 있습니다. extjs는 접촉한 지 5일이 걸렸습니다. 3일 전에 문서를 보고 이틀 후에 몇 개의 인터페이스를 썼습니다.이것은 오늘 오후에 쓴 것이다.근데 1년 동안내가 배운 것은 너무 복잡하다.
자바에서 넘어갔어요.net, asp를 배웠습니다.net에서 wcf를 배웠습니다.앞뒤는 모두 내가 써야 한다.앞머리가 너무 못생겨서 extjs를 또 배웠어요.이전에델파이 개발을 했습니다.코드가 혼란스러워서 c#로 다시 쓰고 싶어요.그래서 wpf기술을 봤어요.몇 개의 모듈을 썼다.상사가 안 해도 된다고 했어요.아이고.젠장, 젠장.
그리고 저는 백엔드에 관심이 많아서 이 일도 하고 싶지 않아요.현재의 주류는 이동과 구름이라는 것을 안다.그리고 나서 나는 또android 개발을 독학했다.또 하둡에 대한 지식을 보기 시작했다.이것들은 모두 할 수 있고, 모두 할 수 있다.맞습니다.나는 확실히 공부할 시간이 많다.그러나 나는 영원히 한 방면에서 깊이 들어갈 수 없다고 생각한다. 장래에도 어떻게 해야 할지 모르겠다.
모두들 이 일에 대한 견해를 이야기하길 바랍니다. 모두가 일을 하는 것이 이렇게 잡다한 것입니까?아니면 나만 그런 거야?아이고, 핍박이야!세상에!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
