Temat: ExtJS 4: Jak załadować Store wywołany do XTemplate w...

Zaczynam się bawić ExtJS 4, jestem jeszcze "zielony" w tym temacie więc proszę o wyrozumiałość bo problem jest pewnie banalny.

Kod, który piszę zgodnie z zaleceniem Teamu Sencha podzieliłem na controller, model, store, view. Zdefniowałem standardowy plik app.js itp. itd.

Do rzeczy.
Posiadam controller odpowiadający za zarządzanie drzewem użytkowników:

Ext.define('QL.controller.UsersTree', {

    extend: 'Ext.app.Controller',



    stores: ['UsersTree', 'Users'],

    model: 'User',

    views: ['user.Tree', 'user.Add', 'user.Details'],



    refs: [

    	{ref: 'userForm', selector: 'useradd form'},

    	{ref: 'userDetailsView', selector: 'userdetails'}

    ],



   	init: function(){

   		this.control({

   			'usertree': {

   				itemclick: this.getUserDetails,

   				itemmove: this.moveUser

   			},

   			'usertree button[action=addUser]': {

   				click: this.addUser

   			},

   			'usertree button[action=addGroup]': {

   				click: this.addGroup

   			}

   		})

   	},



   	addUser: function(){

   		console.log('add user');

   	},



   	addGroup: function(){

   		console.log('add group');

   	},



   	getUserDetails: function(view, record){



		if(record.data.leaf){	//if user

			store = this.getUsersStore();

			store.load({

				params: {

					idNode: record.data.id

				}

			})

			var userDetails = this.getuserDetails;

		}

	},



   	moveUser: function(tree, node, newParent){

   		console.log('move user');

   	}

});

tutaj wszystko ładnie działa, drzewo się wyświetla, ładuje użytkowników itp. Funkcja "getUserDetails" wywołuje odpowiednie żądanie do serwera, a serwer zwraca odpowiednią odpowiedź.

Posiadam także prosty view o kodzie:

Ext.define('QL.view.user.Details' ,{

    extend: 'Ext.panel.Panel',

	alias: 'widget.userdetails',



	store: 'Users',

	model: 'User',



	cls: 'userdetails',

	autoScroll: true,



	title: 'User Details',

	html: 'html content 123',

	bodyPadding: 5,



	initComponent: function(){

		Ext.apply(this, {

			tpl: new Ext.XTemplate(

				'<p>name: {name}, surname: {surname}</p>'

			)

		});



		this.callParent(arguments);

	}





});

W jaki sposób sprawić by po wywołaniu funkcji "getUserDetails" w contoller'ze w view, template typu XTemplate został uzupełniony oraz poprawnie wyświetlony w body Panelu?Adam Zakrzewski edytował(a) ten post dnia 30.06.11 o godzinie 15:50

Temat: ExtJS 4: Jak załadować Store wywołany do XTemplate w...

Najlepiej będzie, jak wrzucisz działający przykład, jednakże spróbujmy.
Tutaj masz przykład z jakiś sampli z trójki:

    var p2 = new Ext.Panel({

        title: 'XTemplate',

        width: 300,

        html: '<p><i>Apply the template to see results here</i></p>',

        tbar: [{

            text: 'Apply Template',

            handler: function(){



                var tpl = new Ext.XTemplate(

                    '<p>Name: {name}</p>',

                    '<p>Company: {company}</p>',

                    '<p>Location: {city}, {state}</p>',

                    '<p>Kids: ',

                    '<tpl for="kids" if="name==\'Jack Slocum\'">',

                        '<tpl if="age > 1"><p>{#}. {parent.name}\'s kid - {name}</p></tpl>',

                    '</tpl></p>'

                );

                tpl.overwrite(p2.body, data);

                p2.body.highlight('#c3daf9', {block:true});

            }

        }],



        renderTo: document.body

    });

W handlerze w toolbar masz wszystko to co cię interesuje. Zasada jest następująca: w funkcji obsługi klika / zaznaczania użytkownika na drzewie musisz mieć referencje do panelu. Zakładam, że masz. Dalej wywołujesz odpowiednio zmodyfikowane:

 tpl.overwrite(p2.body, data);

 p2.body.highlight('#c3daf9', {block:true});

z tym, że:
- przenieś tpl do konfiga
- dodaj complied jak poniżej
- możesz też użyć metod tpla do np. podkreślania wartości czy czegośtam

var t = new Ext.Template(

    '<div name="{id}">',

        '<span class="{cls}">{name} {value}</span>',

        '<span class="{cls}">this.someFn(values)</span>',

    '</div>',

    // a configuration object:

    {

        compiled: true,      // compile immediately

        disableFormats: true // See Notes below.

        ,someFn: function(values){

           console.log('do smth'); // return smth

        }

    }

);

Temat: ExtJS 4: Jak załadować Store wywołany do XTemplate w...

Coś mi się jeszcze przypomniało. Mając store masz metodę pobierania zaznaczonego rekordu,z którego możesz wyciągnąć dane.

Temat: ExtJS 4: Jak załadować Store wywołany do XTemplate w...

Thx za zainteresowanie. Kod umieściłem tutaj http://qlstiffler.nazwa.pl/exttest/

Dwa pliki, których kod podawałem wcześniej znajdują się tutaj:
http://qlstiffler.nazwa.pl/exttest/qlsolution_files/js...
http://qlstiffler.nazwa.pl/exttest/qlsolution_files/js...

O ile w wersji 3 wszystko było w jednym miejscu/pliku (a przynajmniej o ile pamiętam nie narzucano jakiejś sensownej struktury) o tyle teraz zależy mi żeby rozbić to na konkretne pliki. Problem w tym, że nie bardzo ogarniam jak ze store dostać się do view i na nim wykonać jakąś konkretną operację.