Отправка данных в API и извлечение их в сетку
0
В моем проекте я использую extjs в интерфейсе. yii2 в бэкэнд. Я создал форму для извлечения выбранных данных из базы данных.
Как видите, у меня есть два поля даты и выпадающий список. И у меня есть группа флажков. Это скриншот моей таблицы базы данных.
Я должен выбрать данные, которые я хочу использовать с помощью флажков, и получить их из базы данных между датами "от" до "до". Когда я нажимаю кнопку RUN, эти выбранные данные должны быть загружены в сетку ниже. Когда я нажимаю кнопку загрузки, эти выбранные данные должны быть загружены в файл csv. Но когда я нажимаю кнопку RUN, он посылает один и тот же вызов API дважды. И один API получает данные правильно, а другой отправляет и ошибочно говорит "Undefined index: from". Это код, на мой взгляд.
recordData: {
date: null,
from: null,
to: null,
rb1: null,
rb1: null,
rb2: null,
rb3: null,
rb4: null,
time: null,
rb5: null,
rb6: null,
rb7: null,
weight: 0,
status: 1
}
},
initComponent: function () {
var me = this;
me.title = 'Reports',
me.store = Ext.create('store.Reports');
Ext.apply(me, {
items: [{
xtype: 'form',
border: false,
padding: 10,
bodyStyle: { "background-color": "#e4e4e4" },
width: '100%',
store: me.store,
defaults: {
selectOnFocus: true,
labelWidth: 125
},
items: [{
xtype: 'datefield',
fieldLabel: 'From',
padding: '10 0 0 40',
name: 'from',
format: 'Y-m-d',
labelWidth: 150,
value: me.recordData.from,
displayField: 'from',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select...'
}, {
xtype: 'datefield',
fieldLabel: 'To',
padding: '20 0 0 40',
name: 'to',
format: 'Y-m-d',
labelWidth: 150,
value: me.recordData.to,
displayField: 'to',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select...'
}, {
xtype: 'combobox',
fieldLabel: 'Report Type',
padding: '20 0 0 40',
name: 'type',
labelWidth: 150,
store: [
['Order Report', 'Order Report']
],
value: me.recordData.type,
displayField: 'type',
typeAhead: true,
queryMode: 'local',
emptyText: 'Select...'
}, {
width: '100%',
bodyStyle: { "background-color": "#e4e4e4" },
padding: '20 0 0 40',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'checkboxgroup',
fieldLabel: 'Customize Report',
width: 700,
labelWidth: 150,
columns: 3,
vertical: false,
items: [
{ boxLabel: 'Order ID', name: 'rb1', inputValue: '1', itemId: 'check1' },
{ boxLabel: 'Connection Number', name: 'rb2', inputValue: '2', itemId: 'check2' },
{ boxLabel: 'Status', name: 'rb3', inputValue: '3', itemId: 'check3' },
{ boxLabel: 'Action', name: 'rb4', inputValue: '4', itemId: 'check4' },
{ boxLabel: 'LOB', name: 'rb5', inputValue: '5', itemId: 'check5' },
{ boxLabel: 'Channel', name: 'rb6', inputValue: '6', itemId: 'check6' },
{ boxLabel: 'Company Name', name: 'rb7', inputValue: '7', itemId: 'check7' }
]
}]
}, {
buttons: [{
xtype: 'button',
text: 'RUN',
itemId: 'btnRun',
handler: function (button, event) {
//console.log("Working!", form);
var form = button.up('form');
//targetGridpanel = button.up();
//console.log("Working!", targetGridpanel);
//console.log("Working!", form);
if (form.isDirty()) {
var _vals = form.getValues();
if (!form.isValid()) {
console.log("Not Working!");
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: me.action + ' Report',
msg: 'Fill mandatory fields'
});
} else {
//console.log(_vals);
me.store.saveRecord(_vals, function () {
});
//me.store.load();
if (me.down('#check1').isDirty()) {
me.down('#rb1').show(true);
}
if (me.down('#check2').isDirty()) {
me.down('#rb2').show(true);
}
if (me.down('#check3').isDirty()) {
me.down('#rb3').show(true);
}
if (me.down('#check4').isDirty()) {
me.down('#rb4').show(true);
}
if (me.down('#check5').isDirty()) {
me.down('#rb5').show(true);
me.down('#time').show(true);
}
if (me.down('#check6').isDirty()) {
me.down('#rb6').show(true);
}
if (me.down('#check7').isDirty()) {
me.down('#rb7').show(true);
}
}
} else {
console.log("Close!");
}
}
}]
}, {
xtype: 'gridpanel',
store: me.store,
flex: 1,
margin: '20 0 0 0',
//minHeight: 300,
height: 240,
viewConfig: {
stripeRows: true
},
bbar: {
xtype: 'pagingtoolbar',
store: me.store,
displayInfo: true,
plugins: Ext.create('Ext.ux.ProgressBarPager')
},
columns: [{
dataIndex: 'date',
//itemId:'date',
text: 'DATE',
flex: 1,
menuDisabled: false,
}, {
dataIndex: 'rb1',
itemId: 'rb1',
text: 'ORDER ID',
flex: 1,
menuDisabled: false,
hidden: true,
}, {
dataIndex: 'rb2',
itemId: 'rb2',
text: 'CONNECTION NUMBER',
menuDisabled: false,
hidden: true,
flex: 2
}, {
dataIndex: 'rb3',
itemId: 'rb3',
text: 'STATUS',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb5',
itemId: 'rb5',
text: 'LOB',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb4',
itemId: 'rb4',
text: 'ACTION',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'time',
itemId: 'time',
text: 'ACTION TIME',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb6',
itemId: 'rb6',
text: 'CHANNEL',
menuDisabled: false,
hidden: true,
flex: 1
}, {
dataIndex: 'rb7',
itemId: 'rb7',
text: 'COMPANY NAME',
menuDisabled: false,
hidden: true,
flex: 1.5
}]
}
, {
buttons: [{
xtype: 'button',
text: 'DOWNLOAD',
itemId: 'download',
//actionMethods: {'read': 'POST'},
handler: function (button, event) {
var self = button.up();
var form = self.up('form');
var vals = form.getValues();
//console.log('Download', vals);
if (vals.from && vals.to && vals.type && (vals.rb1 || vals.rb2 || vals.rb3 || vals.rb4 || vals.rb5 || vals.rb6 || vals.rb7)) {
if (button) {
Ext.Msg.show({
icon: Ext.MessageBox.QUESTION,
buttons: Ext.Msg.YESNO,
title: 'Download Report',
msg: 'Do you want to download the <strong>selected</strong> report file?',
fn: function (buttonId, text, opt) {
if ('yes' == buttonId) {
//console.log(buttonId);
var dummyFormId = 'py-form-' + (new Date()).getTime();
//console.log(dummyFormId);
var frm = document.createElement('form');
frm.id = dummyFormId;
frm.name = dummyFormId;
//console.log(frm);
frm.className = 'x-hidden';
document.body.appendChild(frm);
Ext.Ajax.request({
url: utils.createUrl('api', 'report-download'),
form: Ext.fly(dummyFormId),
isUpload: true,
params: {
from: vals.from,
to: vals.to,
type: vals.type,
rb1: vals.rb1,
rb2: vals.rb2,
rb3: vals.rb3,
rb4: vals.rb4,
rb5: vals.rb5,
rb6: vals.rb6,
rb7: vals.rb7
},
callback: function (opts, success, res) {
console.log('Hello');
//Ext.getBody().unmask();
//console.log(params);
try {
if (success) {
var response = Ext.decode(res.responseText);
if (!response.success) {
throw response.data;
}
} else {
throw response.data;
}
} catch (ex) {
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: 'Download Report',
msg: 'No Data Found'
});
}
},
// fn: function () {
// console.log(arguments);
// }
});
}
}
});
}
} else {
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: 'Download Report',
msg: 'Please fill the form first'
});
}
}
}
]
}
]
}],
});
me.callParent(arguments);
Я отправляю эти данные в файл хранилища. Это код файла хранилища.
extend: 'Ext.data.Store',
model: 'model.Report',
storeId: 'reportStore',
autoLoad: false,
pageSize: Configs.grid.pageSize,
saveRecord: function(data,fnCallBack) {
var me = this;
//var data = this.data;
//autoLoad: true,
//console.log(data);
Ext.getBody().mask('Please wait...');
Ext.Ajax.request({
url: utils.createUrl('api', 'report-read'),
params: data,
callback: function(opts, success, res) {
Ext.getBody().unmask();
try {
if(success) {
var response = App.decodeHttpResp(res.responseText);
if(response.success) {
Ext.Msg.show({
icon: Ext.MessageBox.INFO,
buttons: Ext.Msg.OK,
title: 'Reports',
msg: 'Report saved successfully'
});
} else {
throw response.error;
}
me.load();
} else {
throw 'Unknown Reason';
}
} catch (ex) {
Ext.Msg.show({
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK,
title: 'Report',
msg: 'Failed to save data<br />' +
'Reason: ' + ex
});
}
}
});
}
Это моя модель front-end.
extend: 'Ext.data.Model',
fields: [
{ name: 'from', type: 'auto' },
{ name: 'to', type: 'auto' },
{ name: 'rb1', type: 'auto' },
{ name: 'rb2', type: 'auto' },
{ name: 'rb3', type: 'auto' },
{ name: 'rb4', type: 'auto' },
{ name: 'rb5', type: 'auto' },
{ name: 'time', type: 'auto' },
{ name: 'rb6', type: 'auto' },
{ name: 'rb7', type: 'auto' }
],
proxy: {
type: 'ajax',
noCache: false,
actionMethods: {'read': 'POST'},
api: {
read: utils.createUrl('api', 'report-read'),
//create: utils.createUrl('api', 'user-update'),
// update: utils.createUrl('api', 'user-update'),
// destroy: utils.createUrl('api', 'user-delete')
},
reader: {
type: 'json',
root: 'data'
},
listeners: {
exception: function(proxy, response, operation) {
App.showHttpError('Reports', response);
//console.log(this.fields);
}
}
}
Используя эти файлы, я отправляю данные на контроллер. Это где мой API определен.
Это моя функция контроллера.
public function actionReportRead(){
$post = Yii::$app->request->post();
$time = 0;
$_vals = (new Order())->readReports(
@$post['start'],
@$post['limit'],
$post['from'],
$post['to'],
@$post['rb1'],
@$post['rb2'],
@$post['rb3'],
@$post['rb5'],
@$post['rb4'],
@$time,
@$post['rb6'],
@$post['rb7']
);
$this->setOutputData($_vals);
$this->setOutputStatus(true);
}
Это модель для этого.
public function readReports($start, $limit,$from,$to, $rb1, $rb2, $rb3, $rb5, $rb4, $time, $rb6, $rb7 )
{
if (!$start) { $start = 0; };
if (!$limit) { $limit = Config::PAGE_SIZE; };
//$q = (new ActiveQuery(self::className()));
$q = self::find();
//$q->where(['between', 'submitted_time', $from, $to ]);
$q->alias('T')->andWhere(['BETWEEN', 'T.submitted_time', $from, $to ]);
$q->limit($limit);
$q->offset($start);
$q->orderBy(['T.order_id' => SORT_ASC]);
$data = [];
$action = null;
foreach ($q->all() as $_o) {
if($_o->status == 2){
$action = 'Data Entry Verified';
$time = $_o->timeDataEntry;
}else if($_o->status == 3){
$action = 'QC Accepted';
$time = $_o->timeQcPass;
}else if($_o->status == 4){
$action = 'Accepted';
$time = $_o->timeVerify;
}else if($_o->status == 1){
$action = 'Verification Pending';
$time = $_o->timeQcReject;
}else if($_o->status == 0){
$action = 'Rejected';
$time = $_o->timeQcReject;
}
$userlist='SELECT name FROM Company WHERE id = '.$_o->company_id;
$rsuserlist = Yii::$app->db->createCommand($userlist)->query();
$row = $rsuserlist->read();
$data[] = (object) array(
'date' =>$_o->submitted_time,
'rb1' =>$_o->order_id,
'rb2' =>$_o->conn,
'rb3' =>$_o->status,
'rb5' =>$_o->conn_type,
'rb4' =>$action,
'time' =>$time,
'rb6' =>$_o->channel,
'rb7' =>$row['name']
);
}
$json=Json::encode($data);
$this->logger->actLog($json);
return $data;
}
Как я нашел, это хорошо. Но я не совсем уверен. Я новичок в extjs. Итак, я пробовал много способов, но ничего не получилось. Данные не загружаются в сетку, и API отправляет мне ошибку, о которой я упоминал ранее. Пожалуйста, помогите мне решить эту проблему. Что мне делать больше.
-
0а в чем ошибка?Muhammad Omer Aslam
-
0Я вижу сообщение об ошибке "Неопределенный индекс" из APIBuwaneka Sudheera
1 ответ
0
Я нашел ответ, и я отвечаю на свой вопрос.
Здесь один API получает все данные правильно. Другой не получает значений "от" и "до". Поэтому я использовал следующий код.
me.store.getProxy().extraParams = {
from: vals.from,
to: vals.to
};
Используя это, я могу отправить все параметры в другой API и устранить эту проблему. Теперь данные попадают в сетку без проблем.
Buwaneka Sudheera
Поделиться
Ещё вопросы
- 1Android: чтение файлов - проблема OutOfMemory
- 0CSS не меняется при вызове JS в HTML
- 1Сравнение массивов для проверки последовательности
- 0Запуск imagecreatefrompng массива изображений, но массив только возвращает 1 изображение
- 1Логический вывод типа в Java8
- 1Простой Javascript, если выписка оператора
- 1WPF Получить выбранную строку на сетке данных из шаблона
- 0jQuery jeditable Не удается прочитать свойство «плагин» неопределенного при попытке использовать datetimepicker
- 1Расширение Facebook токена
- 1Как я могу сделать машину видимой поверх фона?
- 1Как игнорировать DivideByZeroException в представлениях Razor
- 0Пользовательский интерфейс jQuery, сбрасываемый за пределы видимой области jScrollpane, ловит событие удаления
- 1Клиент обычно отключается от сервера через несколько десятков минут
- 0jQuery - объект Animate, которому был присвоен случайный идентификатор
- 1Начальные проблемы с перекрашиванием и подсчет соседних проблем
- 0Получить данные из базы данных и создать необходимый формат JSON
- 1Как вы компилируете приложение фляги с Cython?
- 1WebView не работает с net :: ERR_CACHE_READ_FAILURE
- 0преобразование даты в сокращенном формате строки в формат даты в MySQL
- 1отображение списка возможностей программы
- 0Объединение информации в одной таблице и перемещение ее в другую в MySQL
- 1разделение значения и отображение в отформатированном виде
- 1Android-просмотр списка XML с фильтром
- 0Я пытался сделать новостную ленту. Но есть ошибка, когда мышь уходит после наведения
- 1Регистрация того же типа в коллекции с Castle.Windsor дает исключение
- 0Как придать эффект касания div при изменении URL
- 0Как я могу загрузить файлы CoffeeScript из пакетов Bower с помощью веб-пакета?
- 1JAXP - поиск в каталоге отладки XSD
- 1Powershell с c # System.Collections.Generic.dll не найден
- 0У h2 есть запрос / предложение, подобное WHERE IN в MySQL?
- 0как уменьшить строки JavaScript вместо повторения
- 0Угловое расширение директивы
- 0Как получить доступ к обновленному значению в разных контроллерах страниц?
- 1Цикл декремента Python работает медленнее, чем цикл инкремента?
- 0ng-repeat не дублирует данные, когда список обновляется динамически
- 0Перенаправление на страницу успеха с заголовком в Swift Mailer
- 0Как выбрать данные списка Python и заполнить их конкретным блоком ввода - pretype
- 0почему я вижу белую страницу при загрузке моего php на мой хост?
- 1Блокировка на диспетчере
- 0Скрытое поле не появляется в PHP-скрипте
- 1Как правильно авторизовать Google Static Map API
- 0mysqldump cron не может использовать символ>
- 1Закрепление WinForm внутри другого WinForm
- 0Tinymce форматирует текстовую область с помощью HTML. Не отображается в DOM?
- 0Установка состояния в 0, если флажки не установлены
- 0проверка, сколько у div определенного класса
- 0Как я могу предотвратить ссылку, чтобы отправить меня в начало страницы
- 0Объединение и сортировка 2 каналов
- 1Java JComboBox внешний вид
- 0Как я глобализирую и управляю массивом символов через функции
