обучение

js-extjs-Play dinamic

Ext.define('ParamPanel', {
	extend: 'Ext.panel.Panel',
	border: false,
	layout: 'hbox',
	margin: 5,
	items: [],
	bodyStyle: 'background-color: transparent;',

	addComponents: function(name, text){
		console.log(name);
		this.add(
			Ext.create('Ext.form.field.Text',
				{
					margin: 5,
					fieldLabel: name,
					name: name,
					value: text
				}
			)
		);

		this.add(
			Ext.create('Ext.button.Button',
				{
					margin: 5,
					text: 'Удалить',
					handler: function(){
						var formParam = Ext.getCmp('formParam');
						formParam.remove(this.ownerCt);
					}
				}
			)
		);
	}
});


var panelFormForSent = Ext.create('Ext.panel.Panel', {
	title: 'Генерация запроса',
	region: 'north',
	items:[
		{
			xtype: 'panel',
			border: false,
			layout: {
				type: 'hbox',
				align: 'stretch',
			},
			items: [
				{
					xtype: 'panel',
					border: false,
					items: [
						{
							margin: 5,
							xtype: 'textfield',
							fieldLabel: 'Параметр для добавления',
							id: 'addParam'
						},
						{
							margin: 5,
							xtype: 'textfield',
							fieldLabel: 'Значение для добавления',
							id: 'addParamValue'
						}
					]
				},
				{
					margin: 5,
					xtype: 'button',
					text: 'Добавить',
					handler: function(){
						var addParam = Ext.getCmp('addParam');
						var addParamValue = Ext.getCmp('addParamValue');
						var paramPanel = Ext.create('ParamPanel', );
						paramPanel.addComponents(
							addParam.getValue(),
							addParamValue.getValue()
						);
						var formParam = Ext.getCmp('formParam');

						formParam.add(paramPanel);


					}
				}
			],
		},
			Ext.create('Ext.form.Panel', {
				title: 'Форма для отправки запроса',
				id: 'formParam',
				border: false,
				items:[
					{
						xtype: 'panel',
						margin: 5,
						border: false,
						layout: 'vbox',
						items: [
							{
								xtype      : 'fieldcontainer',
								margin: 5,
								fieldLabel : 'Метод',
								defaultType: 'radiofield',
								layout: 'hbox',
								items: [
									{
										boxLabel  : 'GET',
										name      : 'method',
										inputValue: 'GET',
										id        : 'radio1',
									}, {
										boxLabel  : 'POST',
										name      : 'method',
										inputValue: 'POST',
										id        : 'radio2'
									}
								]
							},
							{
								margin: 5,
								xtype: 'textfield',
								fieldLabel: 'URL',
							},
						]
					}
				]
			}
		)
	]
});

Ext.define('Search', {
    fields: ['id', 'query'],
    extend: 'Ext.data.Model',
    proxy: {
        type: 'localstorage',
        id  : 'last-url-generator'
    }
});

var panelWithSaveToLocalStorage = Ext.create('Ext.panel.Panel', {
	title: 'Save',
	region: 'center',
	items: [
		{
			xtype: 'textfield',
			id: 'text'
		},
		{
			xtype: 'button',
			text: 'Save',
			handler: function(){
				console.log("Ok");

				var text = Ext.getCmp('text').getValue();
				console.log(text);

				//our Store automatically picks up the LocalStorageProxy defined on the Search model
				var store = Ext.create('Ext.data.Store', {
					model: "Search"
				});

				//loads any existing Search data from localStorage
				store.load();

				//now add some Searches
				store.add({query: 'Sencha Touch'});
				store.add({query: 'Ext JS'});

				//finally, save our Search data to localStorage
				store.sync();
			}
		}
	]
});

var basicPanel = Ext.create('Ext.panel.Panel', {
	layout: 'border',
	autoScroll: true,
	items: [
		panelFormForSent,
		//panelWithSaveToLocalStorage
	],
});

Ext.Ajax.useDefaultXhrHeader = false;

Ext.application({
    name: 'Querys',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [basicPanel]
        });
    }
});