Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.12.2017, 16:59
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

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;
						}
					}
					],
					
					
					}],
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2017, 17:34
Аватар для Infarch
Профессор
Отправить личное сообщение для Infarch Посмотреть профиль Найти все сообщения от Infarch
 
Регистрация: 06.06.2014
Сообщений: 292

Сделайте минимально необходимый пример в фидле. Палец болит прокручивать эту простыню туда-сюда.
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2017, 21:58
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

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;
						}
					}
					],
					
					
					}],
Ответить с цитированием
  #4 (permalink)  
Старый 07.12.2017, 22:18
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

Infarch,
Нужно сделать itemclick для таблицы, вторым аргументом указать record, но блин я не понимаю как это делать!!!!!!!!!!! Растолкуйте пожалуйста!!
Ответить с цитированием
  #5 (permalink)  
Старый 08.12.2017, 10:49
Аватар для Infarch
Профессор
Отправить личное сообщение для Infarch Посмотреть профиль Найти все сообщения от Infarch
 
Регистрация: 06.06.2014
Сообщений: 292

Фидл - это здесь: https://fiddle.sencha.com/#home
Скопируйте туда ваш код, сделайте так чтоб он запускался. Сохраните и разместите здесь ссылку на ваш новый фидл. Совет - удалите все лишнее! Для решения проблемы не нужны все колонки (кроме проблемной), пагинаторы и фильтры. Код станет компактнее и понятнее для изучения. Кстати часто бывает что после предельно упрощения проблема пропадает сама собой. Не ваш случай, но имейте в виду...
Ответить с цитированием
  #6 (permalink)  
Старый 08.12.2017, 19:41
Аватар для Влад137
Интересующийся
Отправить личное сообщение для Влад137 Посмотреть профиль Найти все сообщения от Влад137
 
Регистрация: 23.11.2017
Сообщений: 22

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();
				}
			}]
Ответить с цитированием
  #7 (permalink)  
Старый 11.12.2017, 13:42
Аватар для Infarch
Профессор
Отправить личное сообщение для Infarch Посмотреть профиль Найти все сообщения от Infarch
 
Регистрация: 06.06.2014
Сообщений: 292

Вам надо использовать несколько иной подход. Находите выбранную строку (модель!) и передаете в окно для редактирования. Там загружаете в форму: 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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Утечки памяти в ExtJS alexey91 ExtJS 1 28.03.2016 21:02
Возможность перемещения указателя по <div> - ExtJS volodjavolodja85 ExtJS 4 28.07.2015 18:14
ExtJs - Перевод книги "Lerning ExtJs" MaXyC ExtJS 17 22.06.2012 17:41
Москва, ищу JavaScript программиста отлично знающего ExtJS, от 10 USD / час. maximgb Работа 3 03.08.2010 14:34
Как получить список пользовательских функций объекта window? Маэстро Events/DOM/Window 13 03.07.2010 13:20