Windows Phone – skinnable application

2012-07-202016-01-31 TPodolakc#, Silverlight, Skins, Themes, Windows Phone

1. Introduction

Today, I would like to present my concept of making skinnable application in Windows Phone 7.1. Making a skinnable application in Windows Phone might be a little bit tricky. Unfortunately, WP7 doesn’t support DynamicResource keyword which is a basic tool for making skins in WPF. In order to overcome this inconvenience I decided to write a SkinManager for WindowsPhone.

2. Base view

As I mentioned before, there is no support for using dynamic resources in WP7, therefore, in order to force a control to change style, we have to assign this style in code behind. It is rather obvious that in a single window/control there might be quite a lot of other controls whose style also should be changed. That is why, I decided to write controls iterator first.

public class ViewsEnumerator : IEnumerator<FrameworkElement>
{
    private Stack<FrameworkElement> _frameworkElementsStack = new Stack<FrameworkElement>();
    private FrameworkElement _current;
    private readonly FrameworkElement _startingElement;
    
    public ViewsEnumerator(FrameworkElement stargingElement)
    {
        _startingElement = stargingElement;
    }
    
    public void Dispose()
    {
        _current = null;
        _frameworkElementsStack.Clear();
        _frameworkElementsStack = null;
    }
 
    #region Implementation of IEnumerator

    public bool MoveNext()
    {
        if (_current == null)
        {
            _current = _startingElement;
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)
                _frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));
        }
        else
        {
            if (_frameworkElementsStack.Count == 0) return false;
            _current = _frameworkElementsStack.Pop();

            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)
                _frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));
            return true;
        }
        return true;
    }

    public void Reset()
    {
        _current = null;
        _frameworkElementsStack.Clear();
        _frameworkElementsStack = null;
    }

    public FrameworkElement Current
    {
        get { return _current; }
    }

    object IEnumerator.Current
    {
        get { return Current; }
    }

    #endregion
}

public class ViewsEnumerator : IEnumerator<FrameworkElement>

{

private Stack<FrameworkElement> _frameworkElementsStack = new Stack<FrameworkElement>();

private FrameworkElement _current;

private readonly FrameworkElement _startingElement;

public ViewsEnumerator(FrameworkElement stargingElement)

{

_startingElement = stargingElement;

}

public void Dispose()

{

_current = null;

_frameworkElementsStack.Clear();

_frameworkElementsStack = null;

}

#region Implementation of IEnumerator

public bool MoveNext()

{

if (_current == null)

{

_current = _startingElement;

for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)

_frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));

}

else

{

if (_frameworkElementsStack.Count == 0) return false;

_current = _frameworkElementsStack.Pop();

for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)

_frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));

return true;

}

return true;

}

public void Reset()

{

_current = null;

_frameworkElementsStack.Clear();

_frameworkElementsStack = null;

}

public FrameworkElement Current

{

get { return _current; }

}

object IEnumerator.Current

{

get { return Current; }

}

#endregion

}

In this iterator I used DFS algorithm for searching elements in a tree. Thanks to this piece of code I can take advantage of LINQ’s benefits. In the next step I created base classes for views.

public interface IViewBase : IEnumerable<FrameworkElement>
{
}

public class ViewBase : UserControl, IViewBase
{
   #region Implementation of IEnumerable

    /// <summary>
    /// Returns an enumerator that iterates through the collection.
    /// </summary>
    /// <returns>
    /// A <see cref="T:System.Collections.Generic.IEnumerator`1"/> that can be used to iterate through the collection.
    /// </returns>
    public IEnumerator<FrameworkElement> GetEnumerator()
    {
        return new ViewsEnumerator(this);
    }

    /// <summary>
    /// Returns an enumerator that iterates through a collection.
    /// </summary>
    /// <returns>
    /// An <see cref="T:System.Collections.IEnumerator"/> object that can be used to iterate through the collection.
    /// </returns>
    IEnumerator IEnumerable.GetEnumerator()
    {
        return GetEnumerator();
    }

    #endregion
}

public interface IViewBase : IEnumerable<FrameworkElement>

{

}

public class ViewBase : UserControl, IViewBase

{

#region Implementation of IEnumerable

/// <summary>

/// Returns an enumerator that iterates through the collection.

/// </summary>

/// <returns>

/// A <see cref="T:System.Collections.Generic.IEnumerator`1"/> that can be used to iterate through the collection.

/// </returns>

public IEnumerator<FrameworkElement> GetEnumerator()

{

return new ViewsEnumerator(this);

}

/// <summary>

/// Returns an enumerator that iterates through a collection.

/// </summary>

/// <returns>

/// An <see cref="T:System.Collections.IEnumerator"/> object that can be used to iterate through the collection.

/// </returns>

IEnumerator IEnumerable.GetEnumerator()

{

return GetEnumerator();

}

#endregion

}

3. SkinManager class

Having prepared basis for skinnable control, let me introduce a custom attribute called the SkinnablePartAttribute

[AttributeUsage(AttributeTargets.Class)]
public class SkinnablePartAttribute : Attribute
{
    public string ThemePartName { get; set; }
}

[AttributeUsage(AttributeTargets.Class)]

public class SkinnablePartAttribute : Attribute

{

public string ThemePartName { get; set; }

}

This attribute should decorate custom controls which should have an ability to change theme/skin. As you can see, the SkinnablePartAttribute has a ThemePartName property which holds information about a name of ResourceDictionary where styles for the given control ought to be searched. Now, it is time to take a look at a SkinManager class. The SkinManager class has one public function – ApplySkin

public static void ApplySkin<TView>(TView view, string skinName)
           where TView : FrameworkElement, IViewBase
{
    foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf<IViewBase>()))
    {
        var assemblyName = control.GetType().Assembly.FullName;
        Uri parsedUri;
        var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();
        if (attribute != null && Uri.TryCreate(string.Format("/{0};component/Themes/{1}/{2}.xaml",assemblyName.Substring(0, assemblyName.IndexOf(",", StringComparison.Ordinal)), skinName,(attribute as SkinnablePartAttribute).ThemePartName), UriKind.Relative, out parsedUri))
            ApplySkin(control, parsedUri);
        else
            Debug.WriteLine(string.Format("Could not find {0}/{1}", skinName,(attribute as SkinnablePartAttribute).ThemePartName));
    }
}

public static void ApplySkin<TView>(TView view, string skinName)

where TView : FrameworkElement, IViewBase

{

foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf<IViewBase>()))

{

var assemblyName = control.GetType().Assembly.FullName;

Uri parsedUri;

var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();

if (attribute != null && Uri.TryCreate(string.Format("/{0};component/Themes/{1}/{2}.xaml",assemblyName.Substring(0, assemblyName.IndexOf(",", StringComparison.Ordinal)), skinName,(attribute as SkinnablePartAttribute).ThemePartName), UriKind.Relative, out parsedUri))

ApplySkin(control, parsedUri);

else

Debug.WriteLine(string.Format("Could not find {0}/{1}", skinName,(attribute as SkinnablePartAttribute).ThemePartName));

}

This function iterates through all controls which implement a IViewBase interface – in other words, the function iterates through our custom controls. If a control is decorated with the SkinnablePartAttribue, a new Uri is created based on the information from the ThemePartName property and from the skinName parameter(I assumed that all dictionaries are located in the Themes directory). In the final step, private function also known as the AppySkin function is called. This function looks this way:

private static void ApplySkin<TView>(TView view, Uri uri, int mergedDictionaryIndex = 0)
            where TView :  IViewBase
{
    var castedView = view as FrameworkElement;
    if(castedView == null) return;

    var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];
    var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });
    castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);
    resourceMergedDictionary.Clear();

    var newStyleDictionary = new ResourceDictionary
    {
        Source = uri
    };

    castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);
    foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf<IViewBase>()).Where(control =>
        beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))
        control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;

    beforeClearDictionary.Clear();
}

private static void ApplySkin<TView>(TView view, Uri uri, int mergedDictionaryIndex = 0)

where TView : IViewBase

{

var castedView = view as FrameworkElement;

if(castedView == null) return;

var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];

var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });

castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);

resourceMergedDictionary.Clear();

var newStyleDictionary = new ResourceDictionary

{

Source = uri

};

castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);

foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf<IViewBase>()).Where(control =>

beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))

control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;

beforeClearDictionary.Clear();

}

Here, all the magic begins. In the first step, current ResourceDictionary is transformed into the standard dictionary. The key of this dictionary is a value of style – a reference to the style object. In the next step, I created a new ResourceDictionary based on the Uri parameter passed to this function. In the last step, another loop over controls is performed. However, this time only controls with the assigned Style property are taken into consideration. Then, if the newStyleDictionary contains a key of given control style we are ready to swap styles.

control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;

1	control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;

Entire listing of SkinManager is presented below

public static class SkinManager
{
    private static void ApplySkin<TView>(TView view, Uri uri, int mergedDictionaryIndex = 0)
        where TView :  IViewBase
    {
        var castedView = view as FrameworkElement;
        if(castedView == null) return;

        var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];
        var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });
        castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);
        resourceMergedDictionary.Clear();

        var newStyleDictionary = new ResourceDictionary
        {
            Source = uri
        };

        castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);
        foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf<IViewBase>()).Where(control =>
            beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))
            control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;

        beforeClearDictionary.Clear();

    }
    
    public static void ApplySkin<TView>(TView view, string skinName)
       where TView : FrameworkElement, IViewBase
    {

        foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf<IViewBase>()))
        {
            var assemblyName = control.GetType().Assembly.FullName;
            Uri parsedUri;
            var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();
            if (attribute != null && Uri.TryCreate(string.Format("/{0};component/Themes/{1}/{2}.xaml",assemblyName.Substring(0, assemblyName.IndexOf(",", StringComparison.Ordinal)), skinName,(attribute as SkinnablePartAttribute).ThemePartName), UriKind.Relative, out parsedUri))
                ApplySkin(control, parsedUri);
            else
                Debug.WriteLine(string.Format("Could not find {0}/{1}", skinName,(attribute as SkinnablePartAttribute).ThemePartName));
            
        }
    }
}

public static class SkinManager

{

private static void ApplySkin<TView>(TView view, Uri uri, int mergedDictionaryIndex = 0)

where TView : IViewBase

{

var castedView = view as FrameworkElement;

if(castedView == null) return;

var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];

var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });

castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);

resourceMergedDictionary.Clear();

var newStyleDictionary = new ResourceDictionary

{

Source = uri

};

castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);

foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf<IViewBase>()).Where(control =>

beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))

control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;

beforeClearDictionary.Clear();

}

public static void ApplySkin<TView>(TView view, string skinName)

where TView : FrameworkElement, IViewBase

{

foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf<IViewBase>()))

{

var assemblyName = control.GetType().Assembly.FullName;

Uri parsedUri;

var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();

ApplySkin(control, parsedUri);

else

Debug.WriteLine(string.Format("Could not find {0}/{1}", skinName,(attribute as SkinnablePartAttribute).ThemePartName));

}

4. Example of usage

In order to use the SkinManager it is essential to make some preparation. First of all, you have to create Themes directory in a project. In this directory there must be separate subdirectories for every skin you would like to use. What is more, in these subdirectories you should place all ResourceDictionaries specified in the SkinnablePartAttribute. A sample directory structure is shown in the picture below:

The very last step is to make controls (which should be skinnable) inherit from ViewBase. Here is example of usage

namespace Joomanji.Chat.Client.Views
{
    [SkinnablePart(ThemePartName = "ChatWindowSkin")]
    public partial class ChatWindowView : ViewBase
    {
        public ChatWindowView()
        {
            SkinManager.ApplySkin(this, "Red"); // change skin
        }
    }   
}

namespace Joomanji.Chat.Client.Views

{

[SkinnablePart(ThemePartName = "ChatWindowSkin")]

public partial class ChatWindowView : ViewBase

{

public ChatWindowView()

{

SkinManager.ApplySkin(this, "Red"); // change skin

}

and screenshots of the same view with different skin

5. Controls with dynamically changing content

After some test, it turned out that the mechanism presented above has problems with controls which change their content dynamically. Let me clarify – styling grids, list boxes etc. work fine, however changing row styles and　listboxitem styles are not working properly. In order to overcome this problem you must define a style for a specific target type. Here is an example of usage with the listbox:

<Style TargetType="ListBox">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="ItemTemplate" Value="{StaticResource GeneralChatMessageTemplate}"/>
</Style>

</Style>

Extjs 4.1.1 – multiselectable datepicker

2012-07-192016-01-31 TPodolakDatePicker, Extjs 4.1.1, JavaScript2 Comments

Recently, I have been given a task to make extjs datepicker allowing for selection of multiple dates. Unfortunately afters hours of searching for some build-in function, it turned out that this kind of functionality is not supported by default. Finaly, I decided to extend datepicker by creating component called highlightableDatePicker. I started from creating a class which inhierits from Ext.picker.Date. First draft of class looked this way

Ext.define('HighlightableDatePicker', {
    extend: 'Ext.picker.Date',
    selectedDates:{},
    clsHighlightClass:'x-datepicker-selected',
    initComponent: function(){
        var me = this;
        me.callParent(arguments);
    },

    highlightDates: function(){
        var me = this;
    }
})

Ext.define('HighlightableDatePicker', {

extend: 'Ext.picker.Date',

selectedDates:{},

clsHighlightClass:'x-datepicker-selected',

initComponent: function(){

var me = this;

me.callParent(arguments);

highlightDates: function(){

var me = this;

}

})

In this class I created additional function highlightDates which is responsible for highlighting dates. Moreover, I added some additional config elements:

selectedDates – object keeping track of dates which should be selected
clsHighlightClass – css class defining selected cell style

The most important part of HighlightableDatepicker class is function highlightDates which is responsible for highlighting dates. The body of this method looks like this

highlightDates: function(){
      var me = this;
       if(!me.cells)
           return;
       me.cells.each(function(item){
           var date = new Date(item.dom.firstChild.dateValue).toDateString();
           if(me.selectedDates[date]){
               if(item.getAttribute('class').indexOf(me.clsHighlightClass)=== -1){
                   item.addCls(me.clsHighlightClass)
               }
           }else{
               item.removeCls(me.clsHighlightClass);
           }
       })
}

highlightDates: function(){

var me = this;

if(!me.cells)

return;

me.cells.each(function(item){

var date = new Date(item.dom.firstChild.dateValue).toDateString();

if(me.selectedDates[date]){

if(item.getAttribute('class').indexOf(me.clsHighlightClass)=== -1){

item.addCls(me.clsHighlightClass)

}

}else{

item.removeCls(me.clsHighlightClass);

}

})

}

As You can see, this function simply compares date in cell with dates stored in selectedDates. If there is a match, cell style is modified by adding extra CSS class into class attribute of cell (see addCls function of Extjs), otherwise CSS class responsible for highlighting is removed. Having defind highlightDates function,I also had to attach an event handler to select event, in order to modify collection of selected dates. This handler looks this way

handleSelectionChanged: function(cmp, date){
   var me = this;
       if(me.selectedDates[date.toDateString()])
           delete me.selectedDates[date.toDateString()]
       else
           me.selectedDates[date.toDateString()] = date;
       me.highlightDates();
}

handleSelectionChanged: function(cmp, date){

var me = this;

if(me.selectedDates[date.toDateString()])

delete me.selectedDates[date.toDateString()]

else

me.selectedDates[date.toDateString()] = date;

me.highlightDates();

}

The final step to make this control work is to attach event handlers and call highlightDates function during initialization of component.

initComponent: function() {
        var me = this;
        me.callParent(arguments);
        me.on('select',me.handleSelectionChanged,me);
        me.on('afterrender',me.highlightDates,me);
}

initComponent: function() {

var me = this;

me.callParent(arguments);

me.on('select',me.handleSelectionChanged,me);

me.on('afterrender',me.highlightDates,me);

}

Please, notice that highlightDates is called after component is rendered, because there is no rendered cells before that moment. Entire code listing is presented below

Ext.define('HighlightableDatePicker', {
    extend: 'Ext.picker.Date',
    selectedDates : {},
    clsHighlightClass :'x-datepicker-selected',
    
    initComponent: function(){
        var me = this;
        me.callParent(arguments);
        me.on('select',me.handleSelectionChanged,me);
        me.on('afterrender',me.highlightDates,me);

    },
    
    highlightDates: function(){
        var me = this;
        if(!me.cells)
            return;
        me.cells.each(function(item){
            var date = new Date(item.dom.firstChild.dateValue).toDateString();
            if(me.selectedDates[date]){
                if(item.getAttribute('class').indexOf(me.clsHighlightClass)=== -1){
                    item.addCls(me.clsHighlightClass)
                }
            }else{
                item.removeCls(me.clsHighlightClass);
            }
        })
    },

    handleSelectionChanged: function(cmp, date){
        var me = this;
        if(me.selectedDates[date.toDateString()])
            delete me.selectedDates[date.toDateString()]
        else
            me.selectedDates[date.toDateString()] = date;
        me.highlightDates();
    }
})

Ext.define('HighlightableDatePicker', {

extend: 'Ext.picker.Date',

selectedDates : {},

clsHighlightClass :'x-datepicker-selected',

initComponent: function(){

var me = this;

me.callParent(arguments);

me.on('select',me.handleSelectionChanged,me);

me.on('afterrender',me.highlightDates,me);

highlightDates: function(){

var me = this;

if(!me.cells)

return;

me.cells.each(function(item){

var date = new Date(item.dom.firstChild.dateValue).toDateString();

if(me.selectedDates[date]){

if(item.getAttribute('class').indexOf(me.clsHighlightClass)=== -1){

item.addCls(me.clsHighlightClass)

}

}else{

item.removeCls(me.clsHighlightClass);

}

})

handleSelectionChanged: function(cmp, date){

var me = this;

if(me.selectedDates[date.toDateString()])

delete me.selectedDates[date.toDateString()]

else

me.selectedDates[date.toDateString()] = date;

me.highlightDates();

}

})

and the result

Source code for this post can be found here

Extjs 4.1 – zmiana stylu konkretnej komórki w gridzie

2012-07-132016-01-31 TPodolakExtjs 4.1.1, Grid, Renderer

Witam Dzisiejszy post nie będzie związany z platformą .NET, lecz z javascriptowym frameworkiem Extjs w wersji 4.1. Jako, że ostatnio w pracy poświęcam dużo czasu na pisanie w wyżej wymienionej technologii postanowiłem zaprezentować, w jaki sposób zmienić styl konkretnej komórki w gridzie. Zacznijmy od przygotowania danych do wyświetlenia – zdefiniujmy zatem stora, który będzie przechowywał informacje mające zostać zaprezentowane na gridzie.

Ext.create('Ext.data.Store', {
    storeId:'itemsStore',
    fields:['name', 'email', 'change'],
    data:{'items':[
        { 'name': 'LCD PLAYER',    "change":100  },
        { 'name': 'DVD PLAYER', "change":-20  },
        { 'name': 'CD PLAYER',   "change":23   },
        
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.data.Store', {

storeId:'itemsStore',

fields:['name', 'email', 'change'],

data:{'items':[

{ 'name': 'LCD PLAYER', "change":100 },

{ 'name': 'DVD PLAYER', "change":-20 },

{ 'name': 'CD PLAYER', "change":23 },

]},

proxy: {

type: 'memory',

reader: {

type: 'json',

root: 'items'

}

});

Następnie podepnijmy stora pod grida w wersji podstawowej – bez zmiany stylu konkretnych komórek.

Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('itemsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Change', dataIndex: 'change'}
    ],
    height: 200,
    width: 400,
    forceFit:true,
    renderTo: Ext.getBody()
});

Ext.create('Ext.grid.Panel', {

store: Ext.data.StoreManager.lookup('itemsStore'),

columns: [

{ header: 'Name', dataIndex: 'name' },

{ header: 'Change', dataIndex: 'change'}

height: 200,

width: 400,

forceFit:true,

renderTo: Ext.getBody()

});

W celu zmiany parametrów poszczególnych komórek grida posłużymy się tzw. rendererem. Renderer jest to funkcja, której zadaniem jest modyfikacją komórek w danej kolumnie grida. Dzięki rendererowi możemy nie tyko zmienić zawartość komórki, ale również przypisać jej osobny styl lub klasę CSS. Myślę, że renderer można porównać do conwertera znanego z technologii WPF. Funkcję renderera podłączymy pod ostatnią kolumnę. Kod po modyfikacjach będzie wyglądał w następujący sposób:

Ext.create('Ext.grid.Panel', {
    store: Ext.data.StoreManager.lookup('itemsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Change', dataIndex: 'change', renderer: function(value, metaData, record, row, col, store, gridView){
            if(value>0)
              metaData.tdCls = 'price-rise'
            else
              metaData.tdCls = 'price-fall'
                  
             return value;
        }}
    ],
    height: 200,
    width: 400,
    
    renderTo: Ext.getBody()
});

Ext.create('Ext.grid.Panel', {

store: Ext.data.StoreManager.lookup('itemsStore'),

columns: [

{ header: 'Name', dataIndex: 'name' },

{ header: 'Change', dataIndex: 'change', renderer: function(value, metaData, record, row, col, store, gridView){

if(value>0)

metaData.tdCls = 'price-rise'

else

metaData.tdCls = 'price-fall'

return value;

}}

height: 200,

width: 400,

renderTo: Ext.getBody()

});

.price-fall  {
    background-color: red !important;
    
}
.price-rise {
    background-color: #B0FFC5;
    color:green;
}

.price-fall {

background-color: red !important;

}

.price-rise {

background-color: #B0FFC5;

color:green;

}

Zauważmy, że funkcja renderer przyjmuje kilka parametrów. Najważniejsze z nich to

value – wartość wyświetlona w komórce grida
metaData- obiekt dający nam dostęp do parametrów komórki (np. tdCls)
record – record grida

W moim przypadku na podstawie wartości wyświetlanej w komórkach kolumny “Change”,określam czy dana komórka powinna być czerwona czy zielona. Wygląd grida przed oraz po zastosowaniu renderera przedstawiają poniższe screeny

.NET BLOG

.NET, C# blog

Month: July 2012

Windows Phone – skinnable application

1. Introduction

2. Base view

3. SkinManager class

4. Example of usage

5. Controls with dynamically changing content

Extjs 4.1.1 – multiselectable datepicker

Extjs 4.1 – zmiana stylu konkretnej komórki w gridzie