Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   получение имени кнопки в buttongroup (https://javascript.ru/forum/extjs/39720-poluchenie-imeni-knopki-v-buttongroup.html)

serg3091 09.07.2013 13:50

получение имени кнопки в buttongroup
 
добрый день подскажите плз, как сделать такую универсальную штуку, что бы при клике получать text элемента, в дальнейшем его ajax`ом отправить на сервак, не хочется просто к каждой букве городить , что то подобное ,
var button = Ext.create('Ext.Button', {
            margin:'10 0 0 30',
            text: 'A',
            renderTo: Ext.getBody()
            listeners: {
                click: function(){
                    alert(button.text);
                },
                scope:this
            }
        });
});

Хочу что то универсальное, что бы потом можно легко добавить скажем целый алфавит другого языка.
Ext.require([
        '*'
    ]);

    Ext.onReady(function() {
        var searchDoc = Ext.create('Ext.panel.Panel', {
            title: 'Panel with ButtonGroup',
            renderTo: Ext.getBody(),
            bbar: [{
                    xtype: 'buttongroup',
                    width: '100%',
                    columns: 11,
                    title: 'Поиск',
                    items: [
                        {text: 'А',id: 'el'},{text: 'Б'},{text: 'В'},{text: 'Г'},{text: 'Д'},{text: 'Е'},
                        {text: 'Ё'},{text: 'Ж'},{text: 'З'},{text: 'И'},{text: 'Й'},{text: 'К'},
                        {text: 'Л'},{text: 'М'},{text: 'Н'},{text: 'О'},{text: 'П'},{text: 'Р'},
                        {text: 'С'},{text: 'Т'},{text: 'У'},{text: 'Ф'},{text: 'Х'},{text: 'Ц'},
                        {text: 'Ч'},{text: 'Ш'},{text: 'Щ'},{text: 'Ъ'},{text: 'Ы'},{text: 'Ь'},
                        {text: 'Э'},{text: 'Ю'},{text: 'Я'}
                    ],
//                listeners: {
//                    click: {
//                        element: Ext.get() , //bind to the underlying el property on the panel
//                        fn: function(){  alert("okok"); }
//                    }
//                }
                listeners: {
                    element: Ext.get("el"),
                    click: {
                        fn: function(el) {
                            alert(el.text);
                        }
                    }
                }
        }]
    });
 });

skrudjmakdak 09.07.2013 14:05

как вариант:
Ext.onReady(function() {
	var alphabet = ['А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ё', 'Ж', 'З', 'И', '...'];
	var objs = new Array();
	for (var i = 0; i < alphabet.length; i++)
		objs[i] = {
			text: alphabet[i],
			listeners:
				{
				click:
					{
					fn: function()
						{
						console.log(this.text)
						}
					}
				}
			};
	console.log(objs)
	
        var searchDoc = Ext.create('Ext.panel.Panel', {
            title: 'Panel with ButtonGroup',
            renderTo: Ext.getBody(),
            bbar: [{
                    xtype: 'buttongroup',
                    width: '100%',
                    columns: 11,
                    title: 'Поиск',
                    items: objs,
                listeners: {
                    element: Ext.get("el"),
                    click: {
                        fn: function(el) {
                            alert(el.text);
                        }
                    }
                }
        }]
    });
 });

serg3091 09.07.2013 14:24

спасибо, то что надо, а не поможете ещё чутка, что бы этот кусок был готов уже+) с отправкой ajax поймать на серваке уже сам смогу =)

skrudjmakdak 09.07.2013 14:48

так с чем вам помочь то?? с аяксом?
на оф сайте есть же пример отправки аякс:
вот урла
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Ajax

вот сам пример:
Ext.Ajax.request({
    url: 'request.php',
    params: {
        id: 1
    },
    success: function(response){
        var text = response.responseText;
        console.log(text);
    }
});


можно сделать функцию:
function sendAjax(_text)
	{
	Ext.Ajax.request(
		{
		url: 'request.php',
		params:
			{
			textButton: _text
			},
		success: function(response)
			{
			var text = response.responseText;
			console.log(text);
			}
		});
	}


и в событии вызывайте эту функцию:
...
fn: function()
	{
	sendAjax(this.text);
	//console.log(this.text)
	}
...

serg3091 17.07.2013 12:27

Цитата:

Сообщение от skrudjmakdak (Сообщение 261306)
так с чем вам помочь то?? с аяксом?
на оф сайте есть же пример отправки аякс:
вот урла
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Ajax

вот сам пример:
Ext.Ajax.request({
    url: 'request.php',
    params: {
        id: 1
    },
    success: function(response){
        var text = response.responseText;
        console.log(text);
    }
});


можно сделать функцию:
function sendAjax(_text)
	{
	Ext.Ajax.request(
		{
		url: 'request.php',
		params:
			{
			textButton: _text
			},
		success: function(response)
			{
			var text = response.responseText;
			console.log(text);
			}
		});
	}


и в событии вызывайте эту функцию:
...
fn: function()
	{
	sendAjax(this.text);
	//console.log(this.text)
	}
...

Совсем запутался, не получается ничего, как мне в grid теперь всё это аккуратненько положить ?
Ext.require([
            '*'
        ]);
		Ext.onReady(function() {
		
		Ext.define('WordListModel', {
        extend: 'Ext.data.Model',
        fields: [
					{name:'wordid', type: 'int'},
					{name:'wordval', type: 'string'},
					{name: 'last_update', mapping: 'last_update', type: 'date'}
				]
		});
		var store = Ext.create('Ext.data.Store', {
        model: 'WordListModel',
		buffered: true,
		//autoLoad: true,
		remoteSort: true,
		proxy: {
            type: 'ajax',
			timeout: 60000,
			enablePaging: true,
            url: 'controller/json.php',
			actionMethods: 'POST',
			reader: {
                root: 'wordsList',
				totalProperty: 'totalCount'
            },
			simpleSortMode: true,
        }
    });
            function sendAjax(_text){
                Ext.Ajax.request({
                            actionMethods: 'POST',
                            url: 'controller/json.php',
                            params:{
                                textButton: _text
                            },
                            success: function(response){
                                var text = response.responseText;
                            }
                        });
            };
            var alphabet = ['А', 'Б', 'В', 'Г', 'Д','Е','Ё','Ж','З','И','Й',
                            'К','Л','М','Н','О','П','Р','С','Т','У','Ф','Х',
                            'Ц','Ч','Ш','Щ','Ъ','Ы','Ь','Э','Ю','Я'];
            var objs = new Array();
            for (var i = 0; i < alphabet.length; i++)
                objs[i] = {
                    text: alphabet[i],
                    listeners:{
                            click:{
                                fn: function(){
                                    sendAjax(this.text);
                                    Ext.Msg.alert('Побуквенный поиск',"поиск по букве "+this.text);
                                }
                            }
                    }
                };
            var searchDoc = Ext.create('Ext.panel.Panel', {
                titleAlign:"center",
                title: 'Поиск',
                renderTo: Ext.getBody(),
                items:[{
                        xtype: 'textfield',
                        name: 'search',
                        fieldLabel: 'Поиск по маске',
                        allowBlank: false  // requires a non-empty value
                    }],
                bbar: [{
                    xtype: 'buttongroup',
                    width: '100%',
                    columns: 11,
                    title: 'Поиск',
                    items: objs
                }]
            });
			Ext.create('Ext.grid.Panel', {
				store: store,
					width:450,
					height:250,
					renderTo: Ext.getBody(),
					collapsible:true,
					loadMask: true,
					disableSelection: true,
					invalidateScrollerOnRefresh: false,
					viewConfig:
					{
						trackOver: false,
						forceFit:true,
						enableRowBody:true,
						showPreview:true
					},
					title:'Список слов',
						viewConfig: 
						{
							emptyText: 'Нет загруженных слов!'
						},
						columns:
						[
							{
								text: 'id(Номер)',
								flex: 5,
								dataIndex: 'wordid',
								sortable: false
							},
							{
								text: 'Слово',
								dataIndex: 'wordval',
								align: 'central',
								flex: 15,
								sortable: false
							},
							{
							text: 'Последнее обновление',
							xtype: 'datecolumn',
							format: 'm-d h:i a',
							flex: 20,
							dataIndex: 'last_update',
							sortable: true
						}
						]
						});
        });

помогите плз разобратся со store и ajax в нем....

skrudjmakdak 17.07.2013 13:45

я так понял, вам надо по нажатию кнопки обновить стору (отфильтровать)?
тогда вам простой аякс тут ее нужен, надо так прописывать:
for (var i = 0; i < alphabet.length; i++)
	objs[i] = {
		text: alphabet[i],
		listeners:{
			click:{
				fn: function(){
					store.getProxy().extraParams = {textButton: this.text};
					Ext.Msg.alert('Побуквенный поиск',"поиск по букве "+this.text);
				}
			}
		}
	};

serg3091 17.07.2013 15:32

Цитата:

Сообщение от skrudjmakdak (Сообщение 262766)
я так понял, вам надо по нажатию кнопки обновить стору (отфильтровать)?
тогда вам простой аякс тут ее нужен, надо так прописывать:

что нужно жмакаем по кнопке узнаем какая кнопка нажата, и отправляем ее на сервак в качке параметра, на серваке ловлю , выгружаю всё из бд, и конвертирую в json , и в grid возращаю json

skrudjmakdak 17.07.2013 15:38

ааа, сори-сори.. я дибил.. я забыл прописать строчку..
store.getProxy().extraParams = {textButton: this.text};//передаем в стору парамерт, тобишь нашу букву
sotre.load();//перезагружаем нашу стору, грид само собой обновится. (т.е. с сервера придут новые данные)
//обращаться будет по адресу указанному в сторах (url: 'request.php')
Ext.Msg.alert('Побуквенный поиск',"поиск по букве "+this.text);

п.с. значит я вас правильно понял))

serg3091 17.07.2013 16:12

Цитата:

Сообщение от skrudjmakdak (Сообщение 262796)
ааа, сори-сори.. я дибил.. я забыл прописать строчку..
store.getProxy().extraParams = {textButton: this.text};//передаем в стору парамерт, тобишь нашу букву
sotre.load();//перезагружаем нашу стору, грид само собой обновится. (т.е. с сервера придут новые данные)
//обращаться будет по адресу указанному в сторах (url: 'request.php')
Ext.Msg.alert('Побуквенный поиск',"поиск по букве "+this.text);

п.с. значит я вас правильно понял))

что то снова не правиьно делаю?
Ext.require([
            '*'
        ]);
		Ext.onReady(function() {
		
		Ext.define('WordListModel', {
        extend: 'Ext.data.Model',
        fields: [
					{name:'wordid', type: 'int'},
					{name:'wordval', type: 'string'},
					{name: 'last_update', mapping: 'last_update', type: 'date'}
				]
		});
		var store = Ext.create('Ext.data.Store', {
        model: 'WordListModel',
		buffered: true,
		remoteSort: true,
		proxy: {
            type: 'ajax',
			timeout: 60000,
			enablePaging: true,
            url: 'controller/json.php',
			actionMethods: 'POST',
			reader: {
                root: 'wordsList',
				totalProperty: 'totalCount'
            },
			simpleSortMode: true,
        }
    });
			//function sendAjax(_text){
			//Ext.Ajax.request({
			//actionMethods: 'POST',
			//url: 'controller/json.php',
			//  params:{
			//        textButton: _text
			//      },
			//        success: function(response){
			//              var text = response.responseText;
			//            }
			//          });
			//};
            var alphabet = ['А', 'Б', 'В', 'Г', 'Д','Е','Ё','Ж','З','И','Й',
                            'К','Л','М','Н','О','П','Р','С','Т','У','Ф','Х',
                            'Ц','Ч','Ш','Щ','Ъ','Ы','Ь','Э','Ю','Я'];
            var objs = new Array();
            for (var i = 0; i < alphabet.length; i++)
                objs[i] = {
                    text: alphabet[i],
                    listeners:{
                            click:{
                                fn: function(){
								store.getProxy().extraParams = {textButton: this.text};//передаем в стору парамерт, тобишь нашу букву
								sotre.load();//перезагружаем нашу стору, грид само собой обновится. (т.е. с сервера придут новые данные)
								//обращаться будет по адресу указанному в сторах (url: 'request.php')
								Ext.Msg.alert('Побуквенный поиск',"поиск по букве "+this.text);

                                }
                            }
                    }
                };
            var searchDoc = Ext.create('Ext.panel.Panel', {
                titleAlign:"center",
                title: 'Поиск',
                renderTo: Ext.getBody(),
                items:[{
                        xtype: 'textfield',
                        name: 'search',
                        fieldLabel: 'Поиск по маске',
                        allowBlank: false  // requires a non-empty value
                    }],
                bbar: [{
                    xtype: 'buttongroup',
                    width: '100%',
                    columns: 11,
                    title: 'Поиск',
                    items: objs
                }]
            });
			Ext.create('Ext.grid.Panel', {
				store: store,
					width:450,
					height:250,
					renderTo: Ext.getBody(),
					collapsible:true,
					loadMask: true,
					disableSelection: true,
					invalidateScrollerOnRefresh: false,
					viewConfig:
					{
						trackOver: false,
						forceFit:true,
						enableRowBody:true,
						showPreview:true
					},
					title:'Список слов',
						viewConfig: 
						{
							emptyText: 'Нет загруженных слов!'
						},
						columns:
						[
							{
								text: 'id(Номер)',
								flex: 5,
								dataIndex: 'wordid',
								sortable: false
							},
							{
								text: 'Слово',
								dataIndex: 'wordval',
								align: 'central',
								flex: 15,
								sortable: false
							},
							{
							text: 'Последнее обновление',
							xtype: 'datecolumn',
							format: 'm-d h:i a',
							flex: 20,
							dataIndex: 'last_update',
							sortable: true
						}
						]
						});
        });

skrudjmakdak 17.07.2013 16:14

ммм. ну я на пальцах врятли что найду..
в консоль что то падает?
скажите ваш браузер


Часовой пояс GMT +3, время: 15:10.