window extjs
Коллеги, добрый вечер! У меня есть таблица, в таблице столбик с данными ссылочного типа, при нажатии на ссылку должна открываться window с данными из этой строки.Как открыть window я разобрался а как вот сделать чтобы туда были внесены данные я не знаю(( Плюс еще должна работать кнопка сохранить, которая переносит измененные данные в таблицу. Ниже код:
Ext.onReady(function() {
var Store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: false,
fields: [{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'describes', type: 'string'},
{name: 'price', type: 'float'},
{name: 'quantity', type: 'int'}],
data: [{
id: 1,
name: 'Ноутбук Lenovo',
describes: 'Ноутбук ThinkPad T460 14"FHD(1920x1080),i5-6200U(2,3GHz),4Gb,500GB@5400+8Gb cache, HD Graphics 520, WiFi,BT,TPM,FPR,WWAN ready,3cell+3cell,Cam,Win7 Pro 64 + Win10 Pro upgrade coupon,1,7kg, 3y OS',
price: 100,
quantity: 2
}, {
id: 2,
name: 'Клавиатура OKLICK',
describes: 'Клавиатура OKLICK 140M, USB, черный',
price: 50,
quantity: 8
}, {
id: 3,
name: 'Сетевой адаптер',
describes: 'Сетевой адаптер WiFi D-Link DWA-582 DWA-582/RU',
price: 7,
quantity: 0
}]
});
var prdPanel = Ext.create('Ext.window.Window', {
title: 'Карточка товара',
width: 350 ,
height: 300,
layout: 'anchor',
padding: 5,
proxy:{
type: 'localstorage',
id: 'settings'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'ID',
padding: 5,
dataIndex: 'id'
}, {
xtype: 'textfield',
fieldLabel: 'Имя',
name: 'name',
padding: 5,
dataIndex: 'name'
}, {
xtype: 'textfield',
fieldLabel: 'Цена',
name: 'price',
padding: 5,
maskRe:/[0-9]/i
}, {
xtype: 'textfield',
fieldLabel: 'Кол-во',
name: 'price',
padding: 5,
maskRe:/[0-9]/i
}],
buttons: [{ //Кнопки
xtype: 'button',
text: 'Сохранить',
action: 'save',
handler: function() {
var data = prdPanel.items.get(2),
value = data.getValue(),
console.log(value);
alert('Имеются измененные данные');
},
}, {
xtype: 'button',
text: 'Отмена',
handler: function() {
prdPanel.hide();
}
}],
}).hide();
var winPanel = Ext.create('Ext.window.Window', {
title: 'Авторизация',
width: 300,
height:200,
layout: 'anchor',
padding: 5,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Логин',
name: 'login',
emptyText: 'введите логин',
labelAlign: 'top',
cls: 'field-margin',
flex: 1
}, {
xtype: 'textfield',
inputType: 'password',
fieldLabel: 'Пароль',
name: 'password',
emptyText: 'введите пароль',
labelAlign: 'top',
cls: 'field-margin',
flex: 1
}],
buttons: [{
text: 'Оправить',
handler: function() {
var login = winPanel.items.get(0);
var passw = winPanel.items.get(1);
if ( login.getValue() == 'admin' && passw.getValue() == 'padmin') {
tabpanel.show();
a.show();
winPanel.hide();
} else {
alert('неверные данные!!');
}
}
}],
}).show();
var a = Ext.create('Ext.form.Panel', {
title: 'Главное окно', //Главное окно
width: '100%' ,
height:35,
cls: 'window',
layout: 'anchor',
renderTo: Ext.getBody(),
}).hide();
var tabpanel = Ext.create('Ext.tab.Panel', {
items : [
{ //Вкладка 1
title : 'Товары 1',
cls: '.tab',
id: 'tab1',
items: [{ //Таблица
xtype: "grid",
height: 300,
width: '100%',
title: 'Товары 1',
store: Store,
plugins: [{
ptype: 'gridfilters'
}],
dockedItems: [{
items: [{ //Фильт по ИД
xtype: 'textfield',
fieldLabel: 'ID',
margin: 3,
name: 'searchstring',
emptyText: 'Фильтр по id', //Type: J
enableKeyEvents: true,
listeners: {
keyup: function(form, e) {
var grid = form.up('grid');
grid.getStore().addFilter({
property: 'id',
value: form.getValue()
});
}
}
}, {
xtype: 'textfield', //Фильтр по описанию
fieldLabel: 'Описание',
margin: 3,
name: 'searchstring',
emptyText: 'Фильтр по описанию',
enableKeyEvents: true,
listeners: {
keyup: function(form, e) {
var grid = form.up('grid');
grid.getStore().addFilter({
property: 'describes',
value: form.getValue()
});
}
}
}]
}, {
xtype: 'pagingtoolbar', //Нижний тулбар
store:Store,
dock: 'bottom',
//displayInfo: true,
beforePageText: 'Страница',
afterPageText: 'из {0}',
//displayMsg: 'Товары {0} - {1} из {2}'
}],
columns: [
{
text : 'ID',
dataIndex: 'id',
width: '5%'
}, {
text : 'Имя',
dataIndex: 'name',
type: 'string',
xtype:'templatecolumn',
width: '15%',
tpl:'<a href="#"">{name}</a>',
listeners: {
click: function(){
prdPanel.show();
}
}
}, {
text : 'Описание',
dataIndex: 'describes',
type: 'string',
width: '60%'
}, {
text : 'Цена',
dataIndex: 'price',
format: '0.00',
xtype: 'numbercolumn',
width: '10%'
}, {
text : 'Количество',
dataIndex: 'quantity',
type: 'int',
width: '10%',
renderer: function(v,m){
var background = v ? 'white' : 'red';
m.style='background-color:'+background;
return v;
}
}
],
}],
:help: :help: :help: |
Сделайте минимально необходимый пример в фидле. Палец болит прокручивать эту простыню туда-сюда.
|
Infarch,
Ext.onReady(function() {
var Store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: false,
fields: [{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'describes', type: 'string'},
{name: 'price', type: 'float'},
{name: 'quantity', type: 'int'}],
data: [{
id: 1,
name: 'Ноутбук Lenovo',
describes: 'Ноутбук ThinkPad T460 14"FHD(1920x1080),i5-6200U(2,3GHz),4Gb,500GB@5400+8Gb cache, HD Graphics 520, WiFi,BT,TPM,FPR,WWAN ready,3cell+3cell,Cam,Win7 Pro 64 + Win10 Pro upgrade coupon,1,7kg, 3y OS',
price: 100,
quantity: 2
}, {
id: 2,
name: 'Клавиатура OKLICK',
describes: 'Клавиатура OKLICK 140M, USB, черный',
price: 50,
quantity: 8
}, {
id: 3,
name: 'Сетевой адаптер',
describes: 'Сетевой адаптер WiFi D-Link DWA-582 DWA-582/RU',
price: 7,
quantity: 0
}]
});
var prdPanel = Ext.create('Ext.window.Window', {
title: 'Карточка товара',
width: 350 ,
height: 300,
layout: 'anchor',
padding: 5,
proxy:{
type: 'localstorage',
id: 'settings'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'ID',
padding: 5,
dataIndex: 'id'
}, {
xtype: 'textfield',
fieldLabel: 'Имя',
name: 'name',
padding: 5,
dataIndex: 'name'
}, {
xtype: 'textfield',
fieldLabel: 'Цена',
name: 'price',
padding: 5,
maskRe:/[0-9]/i
}, {
xtype: 'textfield',
fieldLabel: 'Кол-во',
name: 'price',
padding: 5,
maskRe:/[0-9]/i
}],
buttons: [{ //Кнопки
xtype: 'button',
text: 'Сохранить',
action: 'save',
handler: function() {
var data = prdPanel.items.get(2),
value = data.getValue(),
console.log(value);
alert('Имеются измененные данные');
},
}, {
xtype: 'button',
text: 'Отмена',
handler: function() {
prdPanel.hide();
}
}],
}).hide();
var tabpanel = Ext.create('Ext.tab.Panel', {
items : [
{ //Вкладка 1
title : 'Товары 1',
cls: '.tab',
id: 'tab1',
items: [{ //Таблица
xtype: "grid",
height: 300,
width: '100%',
title: 'Товары 1',
store: Store,
plugins: [{
ptype: 'gridfilters'
}],
dockedItems: [{
items: [{ //Фильт по ИД
xtype: 'textfield',
fieldLabel: 'ID',
margin: 3,
name: 'searchstring',
emptyText: 'Фильтр по id', //Type: J
enableKeyEvents: true,
listeners: {
keyup: function(form, e) {
var grid = form.up('grid');
grid.getStore().addFilter({
property: 'id',
value: form.getValue()
});
}
}
}, {
xtype: 'textfield', //Фильтр по описанию
fieldLabel: 'Описание',
margin: 3,
name: 'searchstring',
emptyText: 'Фильтр по описанию',
enableKeyEvents: true,
listeners: {
keyup: function(form, e) {
var grid = form.up('grid');
grid.getStore().addFilter({
property: 'describes',
value: form.getValue()
});
}
}
}]
}, {
xtype: 'pagingtoolbar', //Нижний тулбар
store:Store,
dock: 'bottom',
//displayInfo: true,
beforePageText: 'Страница',
afterPageText: 'из {0}',
//displayMsg: 'Товары {0} - {1} из {2}'
}],
columns: [
{
text : 'ID',
dataIndex: 'id',
width: '5%'
}, {
text : 'Имя',
dataIndex: 'name',
type: 'string',
xtype:'templatecolumn',
width: '15%',
tpl:'<a href="#"">{name}</a>',
listeners: {
click: function(){
prdPanel.show();
}
}
}, {
text : 'Описание',
dataIndex: 'describes',
type: 'string',
width: '60%'
}, {
text : 'Цена',
dataIndex: 'price',
format: '0.00',
xtype: 'numbercolumn',
width: '10%'
}, {
text : 'Количество',
dataIndex: 'quantity',
type: 'int',
width: '10%',
renderer: function(v,m){
var background = v ? 'white' : 'red';
m.style='background-color:'+background;
return v;
}
}
],
}],
|
Infarch,
Нужно сделать itemclick для таблицы, вторым аргументом указать record, но блин я не понимаю как это делать!!!!!!!!!!! Растолкуйте пожалуйста!! |
Фидл - это здесь: https://fiddle.sencha.com/#home
Скопируйте туда ваш код, сделайте так чтоб он запускался. Сохраните и разместите здесь ссылку на ваш новый фидл. Совет - удалите все лишнее! Для решения проблемы не нужны все колонки (кроме проблемной), пагинаторы и фильтры. Код станет компактнее и понятнее для изучения. Кстати часто бывает что после предельно упрощения проблема пропадает сама собой. Не ваш случай, но имейте в виду... |
Infarch
на самом деле я уже почти всё сделал, не могу только загружать измененные данные в таблицу по клику кнопки сохранить! Даже уже написал как вывести введенное значение в консоль, а вот чтоб табличные данные обновились не могу сделать! buttons: [{ //Кнопки
xtype: 'button',
text: 'Сохранить',
action: 'save',
handler: function() {
var id = prdPanel.query('textfield[name="id"]')[0].getValue();
var name = prdPanel.query('textfield[name="name"]')[0].getValue();
var price = prdPanel.query('textfield[name="price"]')[0].getValue();
var quantity = prdPanel.query('textfield[name="quantity"]')[0].getValue();
var item = Store.getById(id);
item.price = price;
item.quantity = quantity;
console.log(price);
alert('Имеются измененные данные');
prdPanel.hide();
},
}, {
xtype: 'button',
text: 'Отмена',
handler: function() {
prdPanel.hide();
}
}]
|
Вам надо использовать несколько иной подход. Находите выбранную строку (модель!) и передаете в окно для редактирования. Там загружаете в форму: http://docs.sencha.com/extjs/5.1.1/a...hod-loadRecord
Редактируете, по нажатию на сейв апдейтите модель: http://docs.sencha.com/extjs/5.1.1/a...d-updateRecord Если все сделано правильно, то измененные данные отобразятся в гриде и будут помечены красным маркером (если конечно это не отключено). После этого отправляете изменения на сервер средствами самой модели: http://docs.sencha.com/extjs/5.1.1/a...ml#method-save |
| Часовой пояс GMT +3, время: 23:44. |