Тема: window extjs
Показать сообщение отдельно
  #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;
						}
					}
					],
					
					
					}],
Ответить с цитированием